奇舞-フォーム-メモ

フォーム＃フォーム＃
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の後にヘッダをbodyに

置く.
URLコード

   => 20% (  )
!  => 21% 
"  => 22% 
#  => 23% 
$  => 24% 
%  => 25% 
&  => 26% 
'  => 27% 
...

HTTP method

GET

POST

HEAD

PUT

DELETE

OPTIONS

1行テキスト・ボックス

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

//        
    for="apple" >
            type="checkbox" id="apple" name="fruit" value="apple">   
        

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

    typebutton>
//   button   submit
type="submit">submit
type="reset">reset
type="button">button

リターンコミットコントロールステータス

//         
<input type="text" name="username" readonly>
//          
<select name="" disabled>
    <option value="">1option>
    <option value="">2option>
    <option value="">3option>
    <option value="">4option>
select>

フォームデザイン

ユーザーがエラーを起こさないように支援

早期提示エラー

選択/クリック領域

を拡大する.

コントロールが多い場合は

グループ化する.

主動作と副次的動作