html表单标签

黑马程序员pink老师前端入门教程笔记

一、表单的作用

收集用户信息

二、表单的组成

在HTML中，一个完整的表单通常有表单域、表单控件(也称表单元素)和提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域，在HTML标签中，< form>标签用于定义表单域，以实现用户信息的收集和传递。
< form>会把它范围内的表单元素信息提交给服务器。

< form action=“url地址” method=“提交方式” name=“表单域名称” >各种表单元素控件</ form>

常用属性

属性	属性值	作用
action	url地址	用于指定接受并处理服务器的url地址
method	get/post	用于设置表单数据的提交方式，有其取值有get或post
name	名称	用于指定表单的名称，以区分同一个页面中的表单域

表单控件(表单元素)
在表单控件中可以定义各种表单元素，这些表单元素就是允许用户输入或选择的表单控件。

1.input表单元素

< input type=“button/checkbox/file…” name="" value="" checked="" maxlength="">
type属性的属性值及其描述如下

属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的可提交按钮
password	定义密码字段，该字段中的密码被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
sumbmit	定义提交按钮，提交按钮会把表单数据发给服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

input表单元素
除type属性外，input属性还有其他很多属性，其常用属性如下:

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1.name和value是每个表单元素都有的属性值，主要给后台人员使用
2.name表单元素的名字，要求单选按钮和复选框要有相同的name值
3.checked属性主要针对单选按钮和复选框，主要作用于打开页面，就可以默认选中某个表单元素

2.页面中的表单元素很多，如何区分不同的表单元素？
答:name属性，当前input表单的名字，后台可以通过这个name属性找到这个表单。页面中的表单很多，name的主要作用就是用于区分不同的表单。

用户名:<input type="text"  value="请输入用户名"  name="username"/>

• name属性后面的值是自定义的
• radio(或者checkbox)如果是一组，我们必须给他们命名相同的名字

< input type="radio" name="sex" />男
< input type="radio" name="sex"/>女

3.如果页面一打开就让某个单选按钮或者复选框是选中状态？
答:checked属性:表示默认选中状态，用于单选按钮或者复选框。

<input type="radio" name="sex" value="name" checked="checked"/>男
<input type="radio" name="sex" value="name" checked="checked"/>女

label标签

< label>标签为input元素定义标注(标签)
< label>标签用于绑定一个表单元素，当点击< label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验
语法:

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex"/>

< label>标签的 for属性 应当与相关元素的 id属性 相同

< select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select>标签控件定义下拉列表。

< select>
     < option>选项一</ option>
     < option>选项二</ option>
     < option>选项三</ option>
</ select>

1.< select>中至少包含一对option
2.在option中定义select="select"时，当前项即为默认选中项

< textarea>表单元素

使用场景:用户输入较多内容的情况下，我们就不能使用文本框表单了，此时我们可以使用textarea标签，在表单元素中，< textarea>是用来定义多行文本输入的控件。
使用多行文本输入控件，该控件常用于评论，留言板等。
< textarea rows=“3” cols=“20”>文本内容< /textarea>