表单标签 （用于注册界面制作）

前言：

1.为什么需要表单？

• 使用表单的目的是为了收集用户信息

2.表单的组成

• 在HTML中一个完整的表单通常由表单域，表单元素和提示信息三部分组成

---

目录

一.表单域

二.表单元素（表单控件）

1.input输入表单元素

type常用属性

type属性值效果展示

input 标签除 type 属性外的其他属性

label标签

2.select下拉表单元素

select标签效果展示

 3.textarea文本域

textarea效果展示 

---

一.表单域

• 表单域是一个包含表单元素的区域

在HTML中<form></form>标签用于定义表单域，以实现用户信息的收集和传递

<form>会把它范围内的表单元素提交得服务器

语法：

<form action="提交地址" method="提交方式" name="表单域命名" >
                    表单元素
</form>

常用属性：

属性	属性值	解释
action	地址	用于指定接受处理表单数据的地址
method	get / post	设置表单数据提交方式
name	文本	给表单域命名

*注： 

• 提交方式post比get更安全（默认get提交方式）
• action现阶段用不到在JS中会讲

代码示例：

<form action="" method="post" name="go-one">

</form> 

                                                                                                                                  

---

二.表单元素（表单控件）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入悬着的内容控件

1.input输入表单元素

• 在英文单词中input是输入的意思，而在表单元素重<input>标签收集用户信息
• 在<input>标签中，包含一个type属性输入字段拥有很多形式（可以是文本字段，复选框等）

语法：

<input type="属性值"/>

type常用属性

属性值	解释
button	定义可点击按钮
chekbox	定义多选按钮
file	提供文件上传
hidden	定义隐藏的输入字段
image	定义图片形式的上传按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置按钮
submit	定义提交按钮
text	定义单行文本输入字段
email	定义邮箱输入
color	定义颜色
data	截取当前日期（年月日）
datetime-local	截取当前年月日时分
time	截取当前时间
url	定义文本框（与text相同）
range	定义进度条（静态）

*注

• 要使radio定义单选按钮起作用必须给同一组的input标签用name命相同的名字

例如：定义性别单选框

<p><input type="radio" name="xing">男
   <input type="radio" name="xing">女<p>

• text，button，submit等按钮或文本输入框可通过value属性进行更改其中的内容

                                                                                                        

type属性值效果展示

input 标签除 type 属性外的其他属性

属性	属性值	解释
name	自定义	定义input元素的名称
value	自定义	规定 input 元素的值
checked		规定此input中的元素加载时默认选定
maxlength	正整数	规定输入字符段的最大长度
readonly		规定字段只能读不能改
disabled		规定该行框禁用
autofocus		文本输入字段被设置为当页面加载时获得焦点
required		提示该行不能空白提交

*注：没有写属性值的在使用时只需只写属性或属性值等于本身即可

       例如：加载时男默认选中

<input type="radio" name="xing" checked>男
或
<input type="radio" name="xing" checked="checked">男

1. name和value时每个表单元素都有的属性值，主要是提交给后台使用
2. 那么表单元素的名字要求同一组单选按钮或同一组多选按钮要有相同的名字
3. checked属性主要针对于单选按钮和多选按钮在打开界面时可以默认选中其中的表单元素
4. maxlength是用户可以在表单元素中输出的最大字数

                                                                                                

label标签

<label>标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器自动将光标转到或选择相应的表单元素上来增强用户体验

语法+实例：点击“男”时单选框选中

<label for="命名">男</label>
<input type="radio" id="命名">

---

2.select下拉表单元素

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

语法：

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

1. <select>标签中至少包含一对<option>
2. 在<option>中丁一select="selected"时，当前选项默认选中

select标签效果展示

                                                                                                            

---

 3.textarea文本域

使用场景：当用户输入内容较多时，我们就不能使用文本框表单了，这是我们可以使用<textarea>文本域标签

在表单元素中<textarea>标签用于定义多行文本输入的控件，可以输入跟多的文字，常用于留言板，评论等

语法：

<textarea rows="" cols=""></textarea> 

• cols=" "每行字符数  rols=" "显示行数 （实际开发不常用，都是通过css修改）

textarea效果展示 

                                                                                                          

---

以上就是本期全部内容 感谢阅览！！！！