HTML5 表单

表单

表单是一种常见的前后端数据交互方式,下面是表单的基本结构和一些表单控件。

<!-- form 表单主体 | method 表单的 HTTP 请求方法 GET/POST | action 接收请求路径  -->

<form method="post" action="index.php" > 

 <!-- 表单控件 -->

 <input type="text" /> <!-- 文本框 -->

 <input type="password" /> <!-- 密码框 -->

 <input type="hidden" /> <!-- 隐藏框 -->

 <input type="number" /> <!-- 数字框 -->

 <input type="date" /> <!-- 日期控件 -->

 <!-- 多选框 | 相同 name 为一组 -->
 牛奶 <input type="checkbox" name="food" />  面包<input type="checkbox" name="food" />  

 <!-- 单选框 | 相同 name 为一组 -->
 男 <input type="radio" name="sex" />  女 <input type="radio" name="sex" />  

 <!-- 多行文本框 | cols 宽 rows 高 -->
 <textarea rows="2" cols="20"></textarea>

 <!-- 选择框 -->
 <select name="num">
  <option>one</option>
  <option>two</option>
  <option>three</option>
 </select>

 <!-- 上传文件 | accept 文件类型限制 -->
 <input type="file" accept="image/gif, image/jpeg, image/png" >

 <!-- 范围控件 | min max 范围值 -->
 <input type="range" min="1" max="100" />

 <!-- 颜色控件 -->
 <input type="color" />

 <!-- 表单提交 -->
 <input type="submit" value="提交" />

 <!-- 表单重置 -->
 <input type="reset" value="重置" />

 <!-- 普通按钮 -->
 <button type="button">按钮</button>

</form>

控件展示

文本框


密码框


隐藏框


数字框


日期


多选框

面包 牛奶

单选框


多行文本框


选择框


上传文件


范围


颜色


提交


重置


按钮


控件属性

name

<!-- name 属性是一个表示,后台通过这个表示获取对应的表单数据 -->

<input type="text" name="user" />

value

<!-- value 是控件的值 -->

<input type="text" name="user" value="Ada" />

placeholder

<!-- placeholder 提示 -->

<input type="text" placeholder="请输入用户名" />

datalist > list

<!-- datalist > list 下拉提示框 -->

<input type="text" name="someone" list="zhou">
<datalist id="zhou">
 <option value="周杰伦">周杰伦</option>
 <option value="周大福">周大福</option>
 <option value="周武王">周武王</option>
</datalist>

maxlength

<!-- maxlength 长度限制 -->

<input type="text" maxlength="12" />

size

<!-- size 控件尺寸 -->

<input type="text" size="30" />

required

<!-- required 必选 -->

<input type="text" required />

readonly

<!-- readonly 只读 -->

<input type="text" readonly />

disabled

<!-- disabled 禁用 -->

<input type="text" disabled />

pattern

<!-- pattern 正则校验 -->

<input type="text" pattern="[0-7]{3}" />
HTML5 教程 HTML5 基本结构 HTML5 文本和语义 HTML5 布局 HTML5 列表 HTML5 组合 HTML5 表格 HTML5 链接和路径 HTML5 图片 HTML5 表单 HTML5 框架 HTML5 进度条 HTML5 多媒体