- HTML网页设计：一、HTML的基本结构
- HTML网页设计：二、网页的基本标签
- HTML网页设计：三、图像标签之＜img＞标签
- HTML网页设计：四、超链接
- HTML网页设计：五、行内元素和块元素
- HTML网页设计：六、列表
- HTML网页设计：七、表格
- HTML网页设计：八、媒体元素
- HTML网页设计：九、网页的简单布局
- HTML网页设计：十、iframe内联框架
- HTML网页设计：十一、表单
表单是一个包含表单元素的区域，HTML表单用于搜集不同类型的用户输入，表单元素是允许用户在表单中输入内容,如：文本框、密码框、单选框、多选框、按钮、下拉框、滑块等。
一个表单有三个基本组成部分：
- 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
表单的语法结构如下：
注意：
（1） <form>标签用于定义HTML表单，为双标签，一个表单中的所有内容都要写在这个<form>和</form>之间。
（2） action属性指向的地址是表单的数据所发送到的服务器，默认为当前页面。
（3） method属性规定用于发送表单数据的HTTP方法，其中：
- get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高。
- post：效率低，安全，携带大量的数据，不会在地址栏中显示。
（4） name属性规定表单的名称。
1.1 文本框
当用户要在表单中键入字母、数字等内容时，就会用到文本框，其语法结构如下：
注意：表单本身并不可见，在大多数浏览器中，文本字段的默认宽度是 20 个字符。
1.2 密码框
当用户要在表单中键入密码等内容时，就会用到密码框，其语法结构如下：
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
1.3 单选框
当用户在若干给定的选择中只选取一个选项时，就会用到单选框，其语法结构如下：
注意：name属性值相同的一组单选框可实现组内单选。
1.4 多选框
当用户需要在若干给定的选择中选取一个或若干选项时，就会用到多选框，其语法结构如下：
同单选框，想要实现一组选项的多选也需要将name属性值设为同一个值。
1.5 按钮
（1） 提交按钮
提交(submit)按钮语法结构如下：
（2） 重置按钮
重置(reset)按钮语法结构如下：
（3） 普通按钮
普通按钮语法结构如下：
（4） 图片按钮
图片按钮的作用同提交按钮，其语法结构如下：
1.6 下拉框
<select>标签可创建单选或多选菜单（multiple属性规定可选择多个选项），其中<option> 标签用于定义列表中的可用选项，selected属性用作预选初始值。其下拉框语法结构如下：
1.7 文本域
文本域语法结构如下：
1.8 文件域
文件域语法结构如下：
1.9 滑块
滑块语法结构如下：
完整代码和运行结果如下：
2.1 隐藏域
例如隐藏密码框。代码示例如下：
2.2 只读
例如设置用户名为admin，且不可更改。代码示例如下：
2.3 禁用
例如禁用提交按钮。代码示例如下：
完整代码和运行结果如下：
表单验证的好处：
- 减轻服务器压力。
- 保证数据的可行性和安全性。
3.1 用户提示placeholder
- input类型的文本框的一种提示
- 可以描述文本框期待用户输入何种内容
- 提示语默认显示，当文本框输入内容时，提示语消失
- 适用于input标签：text、search、url、email和password等类型
代码示例如下：
3.2 非空判断required
- 规定文本框填写内容不能为空，否则不允许用户提
- 适用于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
代码示例如下：
3.3 正则表达式pattern
- 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
代码示例如下：
完整代码和运行结果如下：
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/1094.html