文章目录
一、表单是什么？
用于收集用户信息，进行人机交互的操作。
二、form标签
1.基础语法
代码如下（示例）：
<form method="发送表单数据方法" action="向何处发送表单数据">
</form>
| 属性 | 说明 |
|---|---|
| type | 指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button ，默认为text |
| name | 指定表单元素的名称 |
| value | 元素初始值。type为radio是必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password是，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为checkbox或radio时，指定按钮是否是被选中 |
发送表单数据方法有get和post
get跳转后会显示用户名与密码，但是用post不会显示相关信息（常用）
name是个类 后面的value是类值
action 指向何处发送表单数据
2.文本框
代码如下（示例）：
<input type="text" name="Username" value="用户名" />
该命令用于输入文字。
3.密码框password
代码如下（示例）：
<input type="password" name="pass" size="20" />
该处文本输入框用于密码的输入
4.单选按钮radio
代码如下（示例）：
<input type="radio" name="类1" value="值1" checked/> 值1
<input type="radio" name="类1" value="值2"/> 值2
checked 指默认选项
标签后面输入选项值，相同类的值的选项互斥
5.复选框
代码如下（示例）：
<input type="checkbox" name="interest" value="play" checked />玩游戏
<input type="checkbox" name="interest" value="po"/>po
<input type="checkbox" name="interest" value="talk" />聊聊天
与单选框不同的是，复选框的选项可以多选，可以不选
checked指默认选项
6.列表框
代码如下（示例）：
<select name="列表名称">
<option value="选项的值1" selected="selected" >选项值1</option>
<option value="选项的值2">选项值2</option>
</select>
该选框可以点开选项卡，进行选择
selected=“selected” 表示默认选项
7.按钮
代码如下（示例）：
<input type="reset" name="butReset" value="reset按钮" ">
<input type="image" src="C:\Users\asus\Desktop\111\icon-4.gif" />
<input type="button" name="butButton" value="button按钮"/>
通过设置一个按钮，来实现不同的功能
8.多行文本域
代码如下（示例）：
<textarea name="showText" cols="文本框长" rows="文本框高">文本内容</textarea>
设置一个文本框来输入多行文字
9.文件域
代码如下（示例）：
<form action="" method="post" enctype="multipart/form-data" >
<p>
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>
通过该命令来上传文件
10.邮箱
代码如下（示例）：
<input type="email" name="email"/>
<input type="submit"/>
可通过该命令设置邮箱格式。
11.网址
代码如下（示例）：
<input type="url" name="userUrl"/>
<input type="submit"/>
12.数字
代码如下（示例）：
<input type="number" name="num" min="" max="" step="10" value="" />
<input type="submit"/>
在文本框里设置输入数字的要求，如最小值、最大值、步进等
13.滑块
代码如下（示例）：
<input type="range" name="range" min="0" max="10" step="2" value="" />
<input type="submit"/>
用滑块来输入百分比或数字量
14.搜索框
代码如下（示例）：
<input type="search" name="sousuo" />
<input type="submit"/>
二、表单验证方式
1.placeholder
代码如下（示例）：
<form action="#" method="post">
<p><input type="text" name="username"
placeholder="请输入用户名" >
</p>
</form>
placeholder 在文本输入框内进行提示
2.required
代码如下（示例）：
<form action="#" method="post">
<p><input type="text" name="username"
required="提示文字" >
</p>
</form>
required 必填 强制要求，会在文本输入框外进行提示
3.pattern
代码如下（示例）：
<form action="#" method="post">
<p> 年龄
<input type="text" name="age" required="请填写此栏位"
pattern="\d[1-9]\d|1[0-2]\d">
</p>
</form>
pattern 用户输入内容，必须符合正则表达式所指的规则，否则就不能提交表单
正则表达式：描述一种字符串匹配的模式,可用于检查字符串是否包含某个子字符串、替换匹配的子字符串或从字符串中提取限定的子字符串等。
4.其他表单属性
代码如下（示例）：
<form action="#" method="post">
<p><input type="text" name="username"
readonly="true"
disabled="disabled"
hidden="hidden"/>
</p>
</form>
readonly=“true” 只读，但提交有效
disabled=“disabled” 此行被禁用，无效化。并不向后台提交数据
hidden="hidden 文字隐藏
总结
以上就是今天要讲的内容，本文仅仅简单介绍了form表单的使用，实际使用中会大量用到form标签。