在HTML中有很多地方都需要登录注册搜索,就会涉及到form表单;
表单常用属性:
| 属性 | 描述 |
|---|---|
| name | 表单的名字 |
| action | 提交表单的目标 |
| method | 提交表单的方法(get) |
| enctype | 上传文件有文字和图片时 |
input常用类型
| 类型（type） | 作用 |
|---|---|
| text | 单行文本框 |
| password | 密码输入框 |
| radio | 单选框 |
| checkbox | 复选框 |
| file | 上传文件 |
| button | 按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| select | 下拉框 |
| option | 下拉列表 |
| textArea | 多行输入文本框（文本域） |
| 类型（type） | 作用 |
|---|---|
| color | 调色板控件 |
| date | 日期控件 |
| datetime | 日期和时间控件 |
| datetime-local | 本地日期和时间 |
| month | 月份控件 |
| week | 星期控件 |
| 邮箱格式 | |
| number | 数字控件 |
| range | 数值控制条 |
| search | 搜索框 |
| tel(pattern="^\d{11}$") | 手机号输入框(11位) |
| url | 网址输入框 |
代码举例：
<body>
<form action="" method="get" enctype="multipart/form-data">
<p>单行文本框：</p>
<input type="text" placeholder="单行文本框" />
<p>密码输入框</p>
<input type="password" placeholder="内容以 * 呈现" />
<p>上传文件：</p>
<!-- 使用文件时，在form属性里面要写 enctype="multipart/form-data" -->
<input type="file" />
<p>下拉框和下拉选项：</p>
<select>
<option value ="1">重庆</option>
<option value ="2" selected >武汉</option> <!-- seclected 默认选项 -->
<option value ="3">成都</option>
<option value ="4">四川</option>
<option value ="5">北京</option>
</select>
<p>单选框：</p>
<input type="radio" value="1" name="sex" checked />男 <!-- checked 默认选项 -->
<input type="radio" value="0" name="sex" />女
<p>复选框：</p>
<!-- checked 默认选项
checkbox[] 将复选的选项放在一个数组里面
-->
<input type="checkbox" name="checkbox[]" value="0" checked />HTML
<input type="checkbox" name="checkbox[]" value="1" />Javascript
<input type="checkbox" name="checkbox[]" value="2" />PHP
<p>文本域：</p>
<input type="textarea" value="多行文本框" />
<p>按钮:</p>
<input type="button" value="按钮" />
<p>提交按钮:</p>
<input type="submit" value="提交" />
<p>重置按钮:</p>
<input type="reset" value="重置" />
<p>颜色控件：</p>
<input type="color" />
<p>日期控件：</p>
<input type="date" />
<p>时间控件：</p>
<input type="time" />
<p>选择日期和时间：</p>
<input type="datetime" />
<p>本地日期和时间：</p>
<input type="datetime-local" />
<p>显示月份：</p>
<input type="month" />
<p>显示星期：</p>
<input type="week" />
<p>显示邮箱：</p>
<!-- 当输入的不是邮箱形式的时，会有提示 -->
<input type="email" />
<p>数字控件：</p>
<input type="number" />
<p>数值控制条：</p>
<!-- step 移动一次的值
min 最小值
max 最大值
value 默认值
-->
<input type="range" step="1" min="0" max="10" value="0" />
<p>搜索框：</p>
<input type="search" />
<p>显示11位手机号码：</p>
<!-- 当输入的不是数字和超出11位，会有提示 -->
<input type="tel" pattern="^\d{11}$" />
<p>网址输入框：</p>
<!-- 当输入的不是网址时，会有提示 -->
<input type="url" name="" id="" value="" />
</form>
</body>
input的一些其它属性：
| 属性 | 描述 |
|---|---|
| placeholder | 文本框提示信息，不影响value值 |
| autocomplete | 是否保存输入内容，on是保存(默认)，off是不报存 |
| autofocus | 获取文本框焦点，有该属性时，打开网页自动获取该文本框的焦点 |
| required | 有该属性的文本框为必填内容，否则无法提交 |
| pattern | 正则验证，文本内容符合验证才能提交 |
