HTML--表单元素

1. 表单概述：
a) 表单就是将用户信息组织起来的容器，将用户填写的内容放置在表单容器中，当用户单击“提交”按钮的时候，表单会将数据统一发送给服务器
2. 标签及表单属性：
a) //：实现表单的创建
b) /两个常用属性：
i. action：此属性指示服务器上处理表单输出的程序，当用户单击表单上的“提交”按钮后，信息发送到Web服务器上，如果action属性的值为空，则默认表单提交到本页
ii. method：此属性告诉浏览器如何将数据发送给服务器，语法为：method=(get | post)
c) post方法提交方式不会改变地址栏的状态，表单数据不会被显示
d) get方法提交方式，地址栏状态会发生改变，表单数据会在URL信息中显示
3. 表单元素及其格式：元素的属性
a) Type：此属性指定表单的类型，类型如下：
i. Text：文本框
ii. Password：密码框
iii. Radio：单选按钮
iv. Checkbox：复选框
v. Button：普通按钮
vi. Submit：提交按钮
vii. File：文本域：通常用于上传文件的操作
viii. Email：邮箱
ix. url：网址
x. number：数字
xi. range：滑块
xii. search：搜索框：用于用户输入搜索关键字的文本框
b) Name：指定表单元素的名称
c) Vaule：此属性是可选属性，它指定表单元素的初始值，如果type为radio类型，必须指定一个值
d) Size：此属性指定表单元素的初始值
e) Maxlength：此属性用于指定输入的最大字符数，默认值为无限大
f) Checked：此属性用于指定按钮是否被选中的，当输入类型为radio和checkbox时，使用此属性
4. Input元素中的email类型，url类型，number类型有自动验证输入是否合法的功能
5. 列表框语法
<select name=”指定列表名称” size=”行数”>
<option valu=“可选项的值“ selected>
</select>
Selected属性表示该选项在默认情况下是被选中的
6. 多行文本框的语法：
<textarea name=”名称” cols=”显示的列数” rows=“显示的行数“>
文本内容
</textarea>
7. 设置表单的隐藏域
a) 将type属性设置为hidden隐藏类型即可创建一个隐藏域
8. 表单的只读与禁用设置
a) 只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示，通过设置readonly属性来实现
b) 禁用场景：只有满足某个条件后，才能选用某项功能，通过disabled属性来实现
9. 表单元素的标注：
a) 这样做的目的就是为了增强鼠标的可用性，当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上，需要使用<label>标签
b) 语法：<label for=”表单元素的id”>标注的文本
c) 对于表单元素而言，其name属性和id属性都是必需的，name属性由表单负责处理，而id属性是给标签和表单元素进行关联的
10. 表单的初级验证
a) 过程：用户填写的表单内容进行验证，验证通过，服务器返回响应
b) 好处：减轻服务器的压力，保证数据的可行性和安全性
c) 表单验证的方法：
i. Placeholder属性用于input类型的文本框提供一种提示，在输入为空时显示，当在文本框中写入内容时消失
ii. Required属性用于规定文本框填写的内容不能为空，否则不允许用户提交订单
iii. Pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配，用户输入的内容必须符合正则表达式所指的规则，否则就不能提交订单