奇舞-表单-笔记

表单

使用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>

表单设计

• 帮助用户不出错
• 尽早提示错误
• 扩大选择/点击区域
• 控件较多时要分组
• 主要动作和次要动作