表单标签——input表单元素、select下拉表单元素和textarea⽂本域
表单标签
表单的⽬的是为了收集⽤户信息。在⽹页中，我们也要跟⽤户进⾏交互，收集⽤户资料，此时就需要表单。
表单的组成：在HTML中，⼀个完整的表单通常由表单域、表单控件（也称为表单元素）和提⽰信息三部分组成。
表单域
表单域就是⼀个包含表单元素的区域。
在HTML标签中，<form>标签⽤于定义表单域，以实现⽤户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form action="url地址"method="提交⽅式"name="表单域名称">
各种表单元素控件
</form>
常⽤属性
属性属性值作⽤
action url地址⽤于指定接收并处理表单数据的服务器程序的url地址。
method get/post⽤于设置表单数据的提交⽅式，其取值为get或post。
name名称⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单域。
input表单元素
在表单域中可以定义各种表单元素，这些表单元素就是⽤户在表单中输⼊或者选择的内容控件。
<input>标签⽤于收集⽤户信息，在<input>标签中，包含⼀个type属性，根据不同的type属性值，输⼊字段拥有很多种形式，可以是⽂本字段、复选框、掩码后的⽂本控件、单选按钮、按钮等。
<input type="属性值">
<input>标签是⼀个单标签。
<input>标签中不是仅仅有type属性，还有其他属性
<input>标签的其他属性
属性属性值描述
name由⽤户⾃定义定义input元素的名称
value由⽤户⾃定义规定input元素的值
checked checked规定此input元素⾸次加载时应当被选中
maxlength正整数规定输⼊字段中的字符的最⼤长度
type属性
type属性的属性值及其描述
属性值描述
textarea中cols表示
button定义可点击按钮（多数情况下，⽤于通过JavaScript启动脚本）。不会提交数据。
checkbox定义复选框。
file定义输⼊字段和“浏览”按钮，供⽂件上传。
属性值描述
hidden定义隐藏的输⼊字段。
image定义图形形式的提交按钮。
password定义密码字段，该字段中的字符被掩码。
radio定义单选按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送给服务器。
text定义单⾏的输⼊字段，⽤户可以在其中输⼊⽂本。默认宽度为20个字符
<form>
⽤户名：<input type="text"name="username"value="请输⼊⽤户名"maxlength="6 "><br>
密码：<input type="password"name="pwd"><br>
性别：男<input type="radio"name="sex"value="男">⼥<input type="radio"name="sex"value="⼥"><br>
爱好：吃饭<input type="checkbox"name="hobby"value="吃饭">睡觉<input type="checkbox"name="hobby"value="睡觉">打⾖⾖<input type="checkbo x"name="hobby"value="打⾖⾖"><br>
上传⽂件：<input type="file">
<input type="submit"value="免费注册">
<input type="reset"value="重新填写">
</form>
运⾏效果
name和value是每个元素都应该有的属性值，主要给后台⼈员使⽤。
name是表单元素的名字，要求单选按钮和复选框要有相同的name值。
单选按钮和复选框可以使⽤checked属性，当页⾯打开时，可以默认选中这个按钮。
submit是提交，默认显⽰“提交”，可以⽤value属性值更改显⽰⽂字。
reset是重置，默认显⽰"重置"，可以⽤value属性值更改显⽰⽂字
<labbel>标签为input元素定义标注
<label>标签⽤于绑定⼀个表单元素，点击<label>标签内的⽂本时，浏览器就会⾃动将焦点（光标）转到或者选择对应的表单元素上，⽤来增加⽤户体验。
语法：
<label for="sex">男</label>
<input type="radio"name="sex"id="sex">
<label>标签的for属性应该与关联元素的id属性相同。
select下拉表单元素
在页⾯中，如果有多个选项让⽤户去选择，并且想要节约页⾯空间时，我们可以使⽤<select>标签空间定义下拉列表。
语法：
<form>
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
</form>
在<select>标签中⾄少含有⼀对<option>标签
在<opyion>中定义selected="selected"时，当前选项即为默认选中项。
textarea⽂本域元素
当⽤户输⼊内容较多的情况下，可以使⽤<textarea>标签，<textarea>标签是⽤于定义多⾏⽂本输⼊的控件。
语法：
<form>
评价<textarea cols="20"rows="5">请对我们的服务做出评价</textarea>
</form>
使⽤<textarea>标签，<textarea>标签是⽤于定义多⾏⽂本输⼊的控件。
语法：
<form>
评价<textarea cols="20"rows="5">请对我们的服务做出评价</textarea>
</form>
可以使⽤cols="每⾏中显⽰的字符数"修改每⾏中的字符数，通过rows="显⽰的⾏数"修改显⽰的⾏数，但是在实际开发中不常使⽤，通常在CSS中设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。