奇舞-表单-笔记
表单
使用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
单行文本框
type="text" name="username" value="zhuowenxuan">placeholder
type="text" name="username" placeholder="请输入你的名字">autofocus
type="text" name="username" placeholder="请输入你的名字" autofocus>
多行文本框
<textarea cols="40" rows="8">textarea>输入验证
"2" maxlength="10" placeholder="2-10">
type="text" pattern="1\d{10}" placeholder="输入手机号">
type="submit" name="submit" value="提交">type
type="search">
type="email">
type="url">novalidate
<form novalidate="">form>radio
type="radio" name="fruit" value="apple"> 苹果
type="radio" name="fruit" value="banana"> 香蕉
type="radio" name="fruit" value="mango"> 芒果checkgox
type="checkbox" name="fruit" value="apple"> 苹果
type="checkbox" name="fruit" value="banana"> 香蕉
type="checkbox" name="fruit" value="mango"> 芒果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
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
"number" min=".5" max="2.5" step="0.01" name="height" value="1.7">
"range" min="10" max="150" step="0.1" name="weight" value="62">
color
type="color">button
回车提交
控件状态
//数据会提交到服务器
<input type="text" name="username" readonly>
//数据不会提交到服务器
<select name="" disabled>
<option value="">1option>
<option value="">2option>
<option value="">3option>
<option value="">4option>
select>表单设计
- 帮助用户不出错
- 尽早提示错误
- 扩大选择/点击区域
- 控件较多时要分组
- 主要动作和次要动作