表单
使用form获取让用户提供数据
<form action="/echo" method="POST">
<p>用户名: <input type="text" name="username"></p>
<p>密码: <input type="password" name="password"></p>
<p> <button type="submit"> 登陆</button></p>
</form>
GET vs POST
- GET 获取服务器数据 ,POST向服务器传输数据
- GET请求资源一般浏览器进行缓存而POST不会
- GET 把信息放在URL中 POST 之后放header在body中
URL 编码
=> 20% (空格)
! => 21%
" => 22%
# => 23%
$ => 24%
% => 25%
& => 26%
' => 27%
...
HTTP method
- GET
- POST
- HEAD
- PUT
- DELETE
- OPTIONS
单行文本框
<input type="text" name="username" value="zhuowenxuan">
placeholder
<input type="text" name="username" placeholder="请输入你的名字">
autofocus
<input type="text" name="username" placeholder="请输入你的名字" autofocus>
多行文本框
<textarea cols="40" rows="8"></textarea>
输入验证
<input required minlength="2" maxlength="10" placeholder="2-10">
<input type="text" pattern="1\d{10}" placeholder="输入手机号">
<input type="submit" name="submit" value="提交">
type
<input type="search">
<input type="email">
<input type="url">
novalidate
<form novalidate=""></form>
radio
<input type="radio" name="fruit" value="apple"> 苹果
<input type="radio" name="fruit" value="banana"> 香蕉
<input type="radio" name="fruit" value="mango"> 芒果
checkgox
<input type="checkbox" name="fruit" value="apple"> 苹果
<input type="checkbox" name="fruit" value="banana"> 香蕉
<input type="checkbox" name="fruit" value="mango"> 芒果
label
//扩大点击区域范围
<label for="apple" >
<input type="checkbox" id="apple" name="fruit" value="apple"> 苹果
</label>
select
<select>
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">芒果</option>
<option value="4">菠萝</option>
<option value="5">榴莲</option>
<option value="6">木瓜</option>
</select>
//可以进行多选
<select name="fruit" multiple size="3">
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">芒果</option>
<option value="4">菠萝</option>
<option value="5">榴莲</option>
<option value="6">木瓜</option>
</select>
//分组
<optgroup label="水果">
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">芒果</option>
<option value="4">菠萝</option>
<option value="5">榴莲</option>
<option value="6">木瓜</option>
</optgroup>
hidden
<input type="hidden" name="secret" value="1">
文件选择
<form enctype="multipart/form-data">
<input type="file" name="resume">
</form>
//选择多个文件
<form enctype="multipart/form-data">
<input type="file" name="resume" multiple>
</form>
date & tiem
<p>data<input type="date"></p>
<p>datetime-local<input type="datetime-local"></p>
<p>month<input type="month"></p>
<p>week<input type="week"></p>
<p>time<input type="time"></p>
number & range
<input type="number" min=".5" max="2.5" step="0.01" name="height" value="1.7">
<input type="range" min="10" max="150" step="0.1" name="weight" value="62">
color
<input type="color">
button
<button> 不指定type</button>
//默认的button 就是submit
<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">button</button>
回车提交
控件状态
//数据会提交到服务器
<input type="text" name="username" readonly>
//数据不会提交到服务器
<select name="" disabled>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
表单设计
- 帮助用户不出错
- 尽早提示错误
- 扩大选择/点击区域
- 控件较多时要分组
- 主要动作和次要动作