文章目录
0 前言
HTML表单是一种用于收集用户输入的数据结构,它可以让用户在网页中填写文本、选择选项、上传文件等。HTML表单由标签定义,包含了各种类型的表单元素,如、、等。表单元素有不同的属性和事件,可以控制它们的外观和行为。表单数据可以通过GET或POST方法提交到服务器,由服务器端的脚本进行处理和响应。在本文中,我们将介绍HTML表单的基本语法,如何创建不同类型的表单元素,以及如何验证和发送表单数据。
1 表单应用、语法和属性
1.1 表单定义
以开发的角度定义:多个输入框及按钮以表格的形式展示出来。常用于网站页面当中的登录或注册功能中。
表单的代码结构:
<form>
用户名:<input type="text"/><br/>
密码<input type="password"/>
</form>
//type的值为当前元素的类型
1.2 文本框
type的值为text,用户输入的值明文显示。
用户名:<input type="text"/>
1.3 密码框
type的值为password,用户输入的值暗文显示。
密码<input type="password"/>
1.4 单选按钮
type的值为radio,同一组单选框有相同的name,checked可设置初始化时默认选中。
男:<input type="radio" name="sex" value="男" checked/>
女:<input type="radio" name="sex" value="女"/>
1.5 复选框
type的值为checkbox,同一组复选框有相同的name,checked可设置初始化时默认选中。
苹果:<input type="checkbox" name="fruit" value="苹果" checked/>
香蕉:<input type="checkbox" name="fruit" value="香蕉"/>
橘子:<input type="checkbox" name="fruit" value="橘子"/>
1.6 列表框
列表的标签名为select,列的标签名为option
<select>
<option>中国</option>
<option>韩国</option>
<option>日本</option>
</select>
1.7 按钮
重置按钮 reset,初始化表单。
提交按钮 submit,将表单中数据提交给后端。
普通按钮button,需自定义效果,默认无效果。
<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="确认">
1.8 多行文本域
可输入多行的文本框
普通文本框:<input type="text"/>
多行文本域:<textarea></textarea>
1.9 文件域
type的值为file,须在form中设置enctype属性为multipart/form-data
<form enctype="multipart/form-data">
<input type="file"/>
<input type="submit" value="提交"/>
</form>
1.10 邮箱
type的值为email,浏览器会自动识别邮箱,如不符合规范,submit将无法提交。
<input type="email"/>
1.11 网址
type的值为url,浏览器会自动识别网址,如不符合规范,submit将无法提交。
<input type="url"/>
1.12 数字
type的值为number,min可设置最小值,max可设置最大值,step可设置数字步长,浏览器会自动识别区间在最小值在最大值之间,且步长正确的数字,如不符合规范,submit将无法提交。
<input type="number" min="1" max="100" step="3"/>
<input type="submit" value="提交"/>
1.13 滑块
type的值为range,min可设置最小值,max可设置最大值,step可设置数字步长,滑块只能选择最小值在最大值之间,且步长正确的数字。
<input type="range" min="1" max="100" step="3"/>
<input type="submit" value="提交"/>
1.14 搜索框
type的值为search,效果为带清空按钮的文本框。
文本框:<input type="text"/>
搜索框:<input type="search"/>
2 表单的高级应用
2.1 隐藏域
type的值为hidden,常用于不需要向用户展示,但需要向后台传参的情况。
<input type="hidden" id="xx" name="xx" value="xx"/>
2.2 只读与禁用
只读:标签内加入readonly,可选中但不可编辑。
禁用:标签内加入disabled,无法选中且不可编辑。
正常文本框:<input type="text"/>
只读文本框:<input type="text" readonly/>
禁用文本框:<input type="text" disabled/>
2.3 表单元素的标注
在<label>
标签内添加属性for,值为对应input标签的id,便于用户的使用。
<label for="male">男:</label><input type="radio" name="sex" id="male" value="男" checked/>
<label for="female">女:</label><input type="radio" name="sex" id="female" value="女"/>
3 表单的初级验证
3.1 表单的初级验证缘由
1)减轻服务器压力
2)保证数据的可行性和安全性
3.2 表单的初级验证方式
1)placeholder
一般用于提示用户需要输入的字符,例“请输入密码…”。输入内容后,提示语消失。适用于text、password、url、email、search等等。
账号:<input type="text" placeholder="请输入账号..."/>
密码:<input type="password" placeholder="请输入密码..."/>
2)required
用户提交的参数不能为空,如为空,则禁止提交并提示。适用于text、radio、file等等。
账号:<input type="text" placeholder="请输入账号..." required/>
密码:<input type="password" placeholder="请输入密码..." required/>
<input type="submit" value="提交"/>