HTML 表單介紹（input & form）

<input>標(biāo)簽

  • <input>標(biāo)簽用于搜集用戶信息，根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本空間、單選按鈕、按鈕等等
  • HTML與XHTML之間的差異：
    • 在HTML中，<input>標(biāo)簽沒有結(jié)束標(biāo)簽
    • 在XHTML中，<input>標(biāo)簽必須被正確的關(guān)閉
  • 屬性：
屬性 值 說明
accept audio/*（接受所有的聲音文件）；video/*（接受所有的視頻文件）；image/*（接受所有的圖像文件）； 不帶分號(hào);的MIME_type；以點(diǎn)號(hào).開始的文件后綴名（表示只接受這種后綴名的文件）。若有多個(gè)類型的文件，以逗號(hào),分隔 規(guī)定通過文件上傳來提交的文件的類型（只針對(duì)type="file"）
alt text 定義圖像輸入的替代文本（只針對(duì)type="image"）。功能類似于 image 元素的 alt 屬性
autocomplete on/off 規(guī)定是否使用輸入字段的自動(dòng)完成功能。當(dāng)用戶在字段開始鍵入時(shí)，瀏覽器基于之前鍵入過的值，顯示出在字段中填寫的選項(xiàng)。autocomplete屬性適用form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE瀏覽器不支持該屬性，只有元素?fù)碛衝ame屬性，該屬性才有效
autofocus autofocus 規(guī)定當(dāng)頁(yè)面加載時(shí)，<input>應(yīng)該自動(dòng)獲得焦點(diǎn)。autofous屬性適用于button、input、keygen、select和textarea元素
checked checked 規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的<input>元素（只針對(duì) type="radio/checkbox"）
disabled disabled 規(guī)定應(yīng)該禁用的<input>元素。被禁用的字段是不能修改的，也不可以使用 tab按鍵切換到該字段，但可以選中或拷貝其文本。注意：disabled 屬性無法與type="hidden"的<input>元素一起使用；對(duì)于IE7-瀏覽器必須設(shè)置為disabled="disabled"，而不可以直接設(shè)置 disabled，否則使用javascript控制時(shí)將失效
form form_id 規(guī)定<input>元素所屬的一個(gè)或多個(gè)表單。form屬性適用于所有input標(biāo)簽的類型，若需要引用一個(gè)以上的表單時(shí)，用空格分隔。注意：IE瀏覽器不支持該屬性，只有元素?fù)碛?name屬性，該屬性才有效
formaction URL 規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的URL（只針對(duì)type="submit/image"）
formenctype application/x-www-form-urlencoded（默認(rèn)）；multipart/form-data；text/plain 規(guī)定當(dāng)表單提交到服務(wù)器時(shí)如何編碼（只適合type="submit/image"）
formmethod get（默認(rèn)，將表單數(shù)據(jù)（form-data）以名稱/值對(duì)的形式附加到 URL：URL?name=value&name=value）；post（以 HTTP post 事務(wù)的形式發(fā)送表單數(shù)據(jù)） 定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法（只適合type="submit/image"）
formnovalidate formnovalidate formnovalidate 屬性覆蓋<form> 元素的 novalidate 屬性。formnovalidate屬性適用于以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE9-瀏覽器不支持
formtarget _blank（在新窗口／選項(xiàng)卡中顯示響應(yīng)）；_self（默認(rèn)，在同一框架中顯示響應(yīng)）；_parent（在父框架中顯示響應(yīng)）；_top（在整個(gè)窗口中顯示響應(yīng)）；framename（在指定的 iframe 中顯示響應(yīng)） 規(guī)定提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞（只適合type="submit/image"）
height pixels 規(guī)定<input>元素的高度（只針對(duì)type="image"，如height="100"）
list datalist_id 屬性引用<datalist>元素，其中包含<input>元素的預(yù)定義選項(xiàng)。datalist元素自身不會(huì)在頁(yè)面顯示，而是為其他元素的 list屬性提供數(shù)據(jù)。list屬性適用于form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE9-瀏覽器及safari瀏覽器不支持
max number（數(shù)字值）；date（日期值） 屬性規(guī)定<input>元素中允許的最大值
maxlength number（數(shù)字值） 屬性規(guī)定<input>元素中允許的最大字符數(shù)（只針對(duì)type="text/password"）
min number（數(shù)字值）；date（日期值） 屬性規(guī)定<input>元素中允許的最小值
multiple multiple 屬性規(guī)定允許用戶輸入到<input>元素的多個(gè)值（適用于type="file/email"）。注意：IE9-瀏覽器不支持
name text 屬性規(guī)定<input>元素的名稱，用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)，或者在客戶端通過javascript引用表單數(shù)據(jù)。注意：只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值
pattern regexp 屬性規(guī)定用于驗(yàn)證<input>元素的值的正則表達(dá)式。pattern屬性適用于以下類型的input元素：text、search、url、tel、email、password。注意：IE9-瀏覽器及safari瀏覽器不支持
placeholder text 屬性規(guī)定可描述輸入<input>字段預(yù)期值的簡(jiǎn)短的提示信息，占位符會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，在輸入域獲得焦點(diǎn)時(shí)消失。placeholder屬性適用于以下類型的input元素：text、search、url、tel、email、password。注意：IE9-瀏覽器不支持
readonly readonly 屬性規(guī)定輸入字段是只讀的。只讀字段是不能修改的，但用戶仍然可以使用tab按鍵切換到該字段，還可以選中或拷貝其文本（readonly屬性可與 type="text/password"的input元素配合使用）。注意：IE7-瀏覽器不支持使用javascript控制readonly屬性
required required 屬性規(guī)定必須在提交表單之前填寫輸入字段（不能為空）。required屬性適用于以下類型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。注意：IE9-瀏覽器及safari瀏覽器不支持
size number（默認(rèn)值是20） size屬性對(duì)于type="text/password"的<input>元素是可見的字符數(shù)；而對(duì)于其他類型，是以像素為單位的輸入字段寬度。注意：由于 size屬性是一個(gè)可視化的設(shè)計(jì)屬性，推薦使用CSS來代替它
src URL 屬性規(guī)定顯示為提交按鈕的圖像的URL（只針對(duì)type="image"）
step number 屬性規(guī)定<input>元素的合法數(shù)字間隔。min、max、step屬性適用于以下類型的input元素：date pickers、number、range
type button ；checkbox ；color ；date ；datetime ；datetime-local ；email ；file ；hidden ；image ；month ；number ；password ；radio ；range ；reset ；search ；submit ；tel ；text ；time ；url ；week 屬性規(guī)定要顯示的<input>元素的類型
value text 指定<input>元素value的值。對(duì)于不同的輸入類型，value屬性的用法也不同：type="button/reset/submit"用于定義按鈕上的顯示的文本；type="text/password/hidden"用于定義輸入字段的初始值；type="checkbox/radio/image"用于定義與輸入相關(guān)聯(lián)的值。注意：type="checkbox/radio"必須設(shè)置 value屬性；value屬性無法與type="file"的input元素一起使用
width pixels 規(guī)定<input>元素的寬度（只針對(duì)type="image"，如width="100"）
關(guān)于 placeholder 屬性
  • placeholder 屬性一般會(huì)在輸入框有一個(gè)提示，該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失
  • 注意：
    • placeholder 屬性適用于以下的 input 類型：text, search, url, telephone, email 以及 password
    • placeholder 為 HTML5 的新屬性
// 之前是沒有 placeholder 這個(gè)屬性的，那么比如用戶在文本框輸入的時(shí)候，如果還有提示信息（對(duì)value設(shè)置值），那么用戶往往需要先刪除提示信息才能輸入
// 解決辦法：利用表單事件
<input autocomplete="on" name="u" id="u" type="text" class="input01" tabindex="1" value="QQ號(hào)碼或Email帳號(hào)" onFocus="if (value =='QQ號(hào)碼或Email帳號(hào)'){value =''}" onBlur="if (value ==''){value='QQ號(hào)碼或Email帳號(hào)';}" />

// 我們通過 size 設(shè)置的 <input> 元素的可見寬度，會(huì)被css樣式設(shè)置中的 width 給覆蓋，因?yàn)?<input> 是內(nèi)聯(lián)塊狀元素
readonly 和 disabled 屬性的區(qū)別
  • 設(shè)置了 readonly 的 input[text] 在提交表單的時(shí)候還是會(huì)提交 input 上聲明的數(shù)據(jù)
  • 設(shè)置了 disabled 的則不會(huì)提交 input 上聲明的數(shù)據(jù)
name 屬性的作用
  • 由于表單提交的數(shù)據(jù)一般都是以 key:value 的方式提交，所以 input 中的 name 屬性主要用來標(biāo)識(shí)提交的數(shù)據(jù)的 key 值，好讓服務(wù)器處理程序分辨
// 例如
<input name=name value=adam>
<input name=age value=18>

// 則服務(wù)器在后臺(tái)收到的數(shù)據(jù)格式可能是這樣的：
{
name:adam,
age:18
}

23種type類型

  • 隨著HTML5的出現(xiàn)，input元素新增了多種類型，用以接受各種類型的用戶輸入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text這10個(gè)是傳統(tǒng)的輸入控件。新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13個(gè)
  • HTML5中，瀏覽器在遇到不識(shí)別的type值時(shí)，會(huì)將type的值解釋為text
屬性值 說明
button 定義可點(diǎn)擊的按鈕，但沒有任何行為，常用于在用戶點(diǎn)擊時(shí)啟動(dòng)javascript程序。注意：IE8-瀏覽器的box-sizing: content-box;，而其他瀏覽器的box-sizing: border-box;
checkbox 定義復(fù)選框，允許用戶在給定數(shù)目的選擇中選擇一個(gè)或多個(gè)選項(xiàng)。同一組的按鈕，name取值一定要一致。注意：checkbox類型的input元素?zé)o法設(shè)置padding和 border（除IE10-瀏覽器以外）
color 創(chuàng)建一個(gè)調(diào)色板用來選擇顏色，顏色值以URL編碼后的十六進(jìn)制數(shù)值提交。如黑色會(huì)以%23000000發(fā)送，其中 %23 是 # 的URL編碼。注意：safari和IE不支持該類型
date 定義date控件（包括年、月、日，不包括時(shí)間）
datetime 定義date和time控件（包括年、月、日、時(shí)、分、秒、幾分之一秒，基于UTC時(shí)區(qū)）
datetime-local 定義date和time控件（包括年、月、日、時(shí)、分、秒、幾分之一秒，不帶時(shí)區(qū)）
email 定義語義上的e-mail地址輸入域，會(huì)自動(dòng)驗(yàn)證email域的值。外觀上與type="text"的input輸入類型沒有差異。注意：IE9-瀏覽器及safari瀏覽器不支持
file 定義文件選擇字段和“瀏覽…”按鈕，供文件上傳。注意：IE8-瀏覽器設(shè)置的type="file"的input元素的寬高為包含 padding和 border的寬高
hidden 定義隱藏輸入類型用于在表單中增加對(duì)用戶不可見，但需要提交的額外數(shù)據(jù)
image 定義圖像形式的提交按鈕。該類型可以設(shè)置width、height、src、alt這四個(gè)屬性。用圖片作為提交按鈕會(huì)一起發(fā)送點(diǎn)擊在圖片上的 x和 y坐標(biāo)，這樣可以與服務(wù)器端那邊的圖結(jié)合使用，如果圖片有 name屬性，也會(huì)隨坐標(biāo)發(fā)送
month 定義month和year控件（不帶時(shí)區(qū)）
number 定義用于輸入數(shù)字的字段。注意：IE不支持該類型；它的取值可以為小數(shù)
password 定義密碼字段（密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代）。注意：IE6瀏覽器設(shè)置的type="text/password"的input元素的寬高為包含padding和 border的寬高
radio 定義單選按鈕，允許用戶從給定數(shù)目的選擇中選一個(gè)選項(xiàng)。同一組按鈕，name值一定要一致
range 定義用于精確值不重要的輸入數(shù)字的控件（比如slider控件）。類似于type="number"的input類型。注意：IE9-不支持該類型
reset 定義重置表單的按鈕（重置所有的表單值為默認(rèn)值）
search 定義語義上的搜索框，外觀上與type="text"的input輸入類型沒有差異
submit 定義提交表單的按鈕
tel 定義語義上的電話輸入域。外觀上與type="text"的input輸入類型沒有差異
text 默認(rèn)。定義一個(gè)單行的文本字段（在大多數(shù)瀏覽器中，默認(rèn)寬度為20個(gè)字符）
time 定義用于輸入時(shí)間的控件（小時(shí)和分鐘）
url 定義語義上的url地址的輸入域，會(huì)自動(dòng)驗(yàn)證url域的值，外觀上與type="text"的input輸入類型沒有差異。注意：IE9-瀏覽器及safari瀏覽器不支持
week 定義week和year控件（不帶時(shí)區(qū)）
  • HTML5擁有多個(gè)可供選取日期和時(shí)間的新輸入類型：
    • date：用于選取日、月、年
    • month：用于選取月、年
    • week： 用于選取周、年
    • time：用于選取時(shí)、分
    • datetime：用于選取時(shí)、日、月、年（UTC時(shí)間）
    • datetime-local：用于選取時(shí)、日、月、年（本地時(shí)間）
  • 注意：IE和firefox這6種日期類型都不支持，chrome不支持datetime類型
<body>
    date: <input type="date"><br><br>
    month: <input type="month"><br><br>
    week: <input type="week"><br><br>
    time: <input type="time"><br><br>
    datetime: <input type="datetime"><br><br>
    datetime-local: <input type="datetime-local"><br><br>

    <!-- 注意：chrome不支持該類型的step設(shè)置 -->
    <input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40"> 
<script type="text/javascript">
// 要預(yù)設(shè)控件的日期和時(shí)間，可以用字符串設(shè)置value屬性
/*
value屬性格式：
date                　　 YYYY-MM-DD
time                 　　hh:mm:ss.s
datetime            　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month            　　　　 YYYY-MM
week                　　 YYYY-Wnn

YYYY = 年
MM = 月
DD = 日
hh = 小時(shí)
mm = 分鐘
ss = 秒
s = 0.1秒
T = 日期與時(shí)間之間的分隔符
Z = Zulu時(shí)間的時(shí)區(qū)
Wnn = W周數(shù)，從1月的第一周開始是1，直到52
*/
// 該類型的value屬性格式還可以用在 min 和 max 的屬性里，用來創(chuàng)建時(shí)間跨度；step 可以用來設(shè)置移動(dòng)的刻度
</script>
</body>

text/password 文本輸入框、密碼輸入框

  • 當(dāng)用戶要在表單中鍵入字幕、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框，文本框也可以轉(zhuǎn)化為密碼輸入框
  • 語法：
<form>
    <input type="text/password" name="名稱" value="文本"/>
</form>
// type：當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟颍ㄒ部梢圆粚?，默認(rèn)類型為text）；當(dāng)type="password"時(shí)，輸入框?yàn)槊艽a輸入框
// name：為文本框命名，以備后臺(tái)程序ASP、PHP使用
// value：為文本輸入框設(shè)置默認(rèn)值（一般起到提示作用），但是如果要更改需用戶手動(dòng)刪除再重新輸入，現(xiàn)在更多的采用 placeholder（占位符）
// placeholder：HTML5的新屬性，適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password
// 若設(shè)置 readonly 屬性，用戶無法更改輸入框中的內(nèi)容
// 若設(shè)置 hidden 屬性，輸入框隱藏，若輸入框默認(rèn)有值還是會(huì)傳到服務(wù)器

// 實(shí)例
<form>
  姓名：
  <input type="text" name="myName">
  <br />
  密碼：
  <input type="password" name="pass">
  // 當(dāng)我們?cè)诿艽a域中鍵入字符時(shí)，瀏覽器將使用項(xiàng)目符號(hào)來替代這些字符
</form>
密碼框內(nèi)密碼的顯示和隱藏
  • 現(xiàn)在很多軟件在密碼框右側(cè)都有一個(gè)小眼睛，用于設(shè)置密碼的顯示和隱藏。通過更改input元素的type屬性得以實(shí)現(xiàn)
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }

    #show{
        height: 20px;
        width: 200px;
        padding: 5px;
        margin: 10px;
        border: 1px solid #ccc;
        line-height: 20px;
    }

    #eye{
        position: relative;
        right: 35px;
        top: 3px;
        width: 15px;
        height: 15px;
        cursor: pointer;
    }
    </style>
</head>
<body>
<input id="show" type="password" maxlength="6">
![](http://upload-images.jianshu.io/upload_images/1871412-eca5856930486c62.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<script type="text/javascript">
eye.on = true;
eye.addEventListener('click', function (){
    if(this.on){
        this.src = 'http://www.iconpng.com/png/iconshock-iphone/eye_closed.png';
        show.type = 'text';
        this.on = false;
    }else{
        this.src = 'http://www.iconpng.com/png/iconshock-iphone/eye_open.png';
        show.type = 'password';
        this.on = true;
    }
});   
</script>
</body>

file 文件上傳

  • 定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳
  • 表單提交文件的正確方式：
    • 添加 input[type=file] 的 input 標(biāo)簽
    • 設(shè)置表單的 method 為 post
    • 設(shè)置表單的 enctype 為 multipart/form-data
<style type="text/css">
    #testForm label{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: no-repeat url('http://www.iconpng.com/png/100-slim-icons/uploading13.png');
        background-size: 50px 50px;
    }

    #testForm #file{
        width: 0;
        height: 0;
    }
</style>
</head>

<body>
<!-- 將上傳文件按鈕尺寸設(shè)置為 0x0，使用 laebl 元素關(guān)聯(lián) -->
<form id="testForm" name='testForm' method="post" action="form_action.html" enctype="multipart/form-data">
    <label for="file"></label>
    <input id="file" type="file" name="image">
</form>
</body>

<!-- 本地圖片預(yù)覽的實(shí)現(xiàn)，大概思路 -->
<body>
<form name='testForm' action="form_action.html">
    選擇圖片文件: <input type="file" name="img" accept="image/*" multiple>
    <input type="submit">
</form>
<form id="testForm1"></form>
<script type="text/javascript">
file.addEventListener('change', function (event) {
    var files = Array.property.slice.call(event.target.files, 0);
    files.forEach(function(item){
        file2dataurl(item, function(url){
            var image = new Image();
            parent.appendChild(image);
            image.src = url;
        });
    });
});
</script>
</body>

radio/checkbox 單選框、復(fù)選框

  • HTML中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一樣，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選
  • 擁有一樣 name 屬性的 radio/checkbox 為一組
// 語法
<input type="radio/checkbox" value="值" name="名稱" checked="checked" />
// 當(dāng)type="radio"時(shí)，控件為單選框；當(dāng)type="checkbox"時(shí)，控件為復(fù)選框
// value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
// name：為控件命名，以備后臺(tái)程序ASP、PHP使用
// checked：當(dāng)設(shè)置checked="checked"時(shí)，該選項(xiàng)被默認(rèn)選中，也可以寫成 checked=true，為false時(shí)取消選中（推薦）
// 若設(shè)置了 disabled 屬性，則該選擇框不能被選中

<!-- 示例 -->
<form method="post" action="save.php">
    你的性別<br>
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女<br>
    你擁有哪些交通工具？<br>
    <input type="checkbox" name="vehicle" value="Bike">我有一輛自行車<br>
    <input type="checkbox" name="vehicle" value="Car">我有一輛小汽車
</form>

使用input創(chuàng)建按鈕 button

  • 用于在HTML表單中創(chuàng)建按鈕
  • 語法：
<form>
<input type="button" value="你好 世界!" onclick="fun1(), fun2()">   // 若需要執(zhí)行多個(gè)函數(shù)，函數(shù)之間用逗號(hào) , 隔開
</form>

submit 提交按鈕

  • 在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置按鈕。當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕
  • 當(dāng)用戶點(diǎn)擊提交按鈕后，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性action定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理
// 語法
<input type="submit" value="提交">
// type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
// value：按鈕上顯示的文字

// 實(shí)例
<form name="isFrom" method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value="" name="myName" />   // 這里沒有設(shè)置默認(rèn)值
    <input type="submit" value="提交" name="submitBtn" />
</form>

reset 重置按鈕

  • 重置表單信息到初始時(shí)的狀態(tài)
// 語法
<input type="reset" value="重置">
// type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有提交作用
// value：按鈕上顯示的文字

// 實(shí)例
<form name="isForm" method="post" action="save.php">
    <label>愛好：</label>
    <select>
        <option value="看書">看書</option>
        <option value="旅游" selected="selected">旅游</option>
        <option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
    </select>
    <input type="submit" value="確定" />
    <input type="reset" value="重置" />
</form>

type=hidden 隱藏域有什么作用？

  • 作用：隱藏域在頁(yè)面中對(duì)于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。用戶單擊發(fā)送按鈕提交表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器
  • 舉例：
    • 有些時(shí)候我們要給用戶一信息，讓他在提交表單時(shí)提交上來以確定用戶身份，如 sessionkey，等等。當(dāng)然這些東西也能用 cookie 實(shí)現(xiàn)，但使用隱藏域就簡(jiǎn)單的多了．而且不會(huì)有瀏覽器不支持，用戶禁用 cookie 的煩惱
    • 有些時(shí)候一個(gè) form 里有多個(gè)提交按鈕，怎么使程序能夠分清楚到底用戶是按哪一個(gè)按鈕提交上來的呢？就可以寫一個(gè)隱藏域name="hidden"，然后在每一個(gè)提交按鈕處加上onclick="document.forms.formName.hidden.value='xx'"，然后服務(wù)器接收到數(shù)據(jù)后先檢查 hidden 的值就會(huì)知道用戶是點(diǎn)擊的哪個(gè)提交按鈕進(jìn)行提交的
    • 有時(shí)候一個(gè)網(wǎng)頁(yè)中有多個(gè)form，我們知道多個(gè)form是不能同時(shí)提交的，但有時(shí)這些 form 確實(shí)相互作用，我們就可以在 form 中添加隱藏域來使它們聯(lián)系起來
    • 還有個(gè)例子，比如按一個(gè)按鈕彈出四個(gè)小窗口，當(dāng)點(diǎn)擊其中的一個(gè)小窗口時(shí)其他三個(gè)自動(dòng)關(guān)閉．可是 IE 不支持小窗口相互調(diào)用，所以只有在父窗口寫個(gè)隱藏域，當(dāng)小窗口看到那個(gè)隱藏域的值是 close 時(shí)就自己關(guān)掉
  • 更多說明詳見：

<form>表單標(biāo)簽

  • 表單是網(wǎng)頁(yè)與用戶的交互工具，由一個(gè)<form>元素作為容器構(gòu)成，封裝其他任何數(shù)量的表單控件，還有其它任何<body>元素里可用的標(biāo)簽。HTML表單可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)
  • 表單能夠包含<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表單控件元素
  • 語法：<form method="傳送方式" antion="服務(wù)器文件">
  • HTML表單控件：
標(biāo)簽 說明
<form> 定義供用戶輸入的表單
<input> 定義輸入域
<textarea> 定義文本域（一個(gè)多行的輸入控件）
<label> 定義了<input>元素的標(biāo)簽，一般為輸入標(biāo)題
<fieldset> 定義了一組相關(guān)的表單元素，并使用外框包含起來
<legend> 定義了<fieldset>元素的標(biāo)題
<select> 定義了下拉選項(xiàng)列表
<optgroup> 定義選項(xiàng)組
<option> 定義下拉列表中的選項(xiàng)
<button> 定義一個(gè)點(diǎn)擊按鈕
<datalist> 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表
<keygen> 定義了表單的密鑰對(duì)生成器字段
<output> 定義一個(gè)計(jì)算結(jié)果
  • 屬性：
屬性 值 說明
accept MIME_type HTML5不支持。規(guī)定服務(wù)器接收到的文件的類型（文件是通過文件上傳提交的）
accept-charset character_set（表單提交時(shí)使用的字符編碼列表，多個(gè)字符編碼使用空格分隔，常用值：UTF-8、ISO-8859-1） 規(guī)定服務(wù)器用哪種字符集處理表單數(shù)據(jù)，通常不指定，那么頁(yè)面的字符編碼會(huì)被使用
action URL 規(guī)定提交表單時(shí)，向何處發(fā)送表單數(shù)據(jù)；如果忽略這個(gè)屬性，表單會(huì)重定向到表單所在的URL
autocomplete on（默認(rèn)。規(guī)定啟用自動(dòng)完成功能。瀏覽器會(huì)基于用戶之前鍵入的值自動(dòng)完成值）；off（規(guī)定禁用自動(dòng)完成功能。用戶必須每次使用時(shí)輸入值到每個(gè)字段中，瀏覽器不會(huì)自動(dòng)完成輸入）。有時(shí)我們禁用了自動(dòng)完成，但是卻沒有作用，失效是因?yàn)闉g覽器內(nèi)部也會(huì)默認(rèn)開啟一個(gè)輸入字段后自動(dòng)補(bǔ)全的功能 規(guī)定是否啟用表單的自動(dòng)完成功能。只有元素?fù)碛?name 屬性，該屬性才有效
enctype application/x-www-form-urlencoded（默認(rèn)值。在發(fā)送前對(duì)所有字符進(jìn)行編碼（將空格轉(zhuǎn)換為 "+" 符號(hào)，特殊字符轉(zhuǎn)換為 ASCII HEX 值））；multipart/form-data（不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)，必須使用該值）；text/plain（ 空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼） 規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼。（適用于 method="post" 的情況）
method get（默認(rèn)）；post 規(guī)定用于發(fā)送表單數(shù)據(jù)的HTTP方法（表單數(shù)據(jù)會(huì)被發(fā)送到 action 屬性中規(guī)定的頁(yè)面中）
name text 規(guī)定表單的名稱
novalidate novalidate 規(guī)定當(dāng)提交表單時(shí)不對(duì)其進(jìn)行驗(yàn)證。注意：IE9-不支持
target _blank（在新窗口／選項(xiàng)卡中打開）；_self（默認(rèn)值。在同一框架中打開）；_parent（在父框架中打開）；_top（在整個(gè)窗口中打開）；frame name（在指定的 iframe 中打開） 規(guī)定在何處打開action URL
  • 注意：
    • 表單里嵌套表單是不允許的
    • 所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框）都必須放在<form></form>標(biāo)簽之間，否則用戶輸入的信息提交不到服務(wù)器上
    • form元素是塊級(jí)元素，其前后會(huì)產(chǎn)生折行

表單名稱 name

  • name屬性規(guī)定表單名稱，如果name="test"，則Javascript可以使用document.forms.test來獲取該表單
<body>
<!-- name 屬性，主要用于 document.forms 這個(gè)API來使用的，我們可以很方便的拿到 form 這個(gè)元素對(duì)象。表單中的表單控件也可以通過這種方式拿到 -->
<form name="testForm" action="save.php" method="post">
    <p><label>帳號(hào)：<input type="text" name="account"></label></p>
</form> 
<script type="text/javascript">
// 通過 name 拿到 testForm
var testForm = document.forms.testForm;
console.log(testForm);  // 輸出 <form name="testForm" action="save.php" method="post">...</form>

// 通過 name 拿到 accountInput
var accountInput = testForm.account;
console.log(accountInput);  // 輸出 <input type="text" name="account">
</script>
</body>

數(shù)據(jù)發(fā)送 method

  • 表單可以用兩種方式發(fā)送數(shù)據(jù)：GET和POST，默認(rèn)為GET方法
POST方法
  • 如果采用POST方法，瀏覽器將會(huì)按照下面兩步來發(fā)送數(shù)據(jù)。首先，瀏覽器將與action屬性中指定的表單處理服務(wù)器建立聯(lián)系，一旦建立連接之后，瀏覽器就會(huì)按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器
  • 在服務(wù)器端，一旦POST樣式的應(yīng)用程序開始執(zhí)行時(shí)，就應(yīng)該從一個(gè)標(biāo)志位置讀取參數(shù)，而一旦讀到參數(shù)，在應(yīng)用程序能夠使用這些表單值以前，必須對(duì)這些參數(shù)進(jìn)行解碼。用戶特定的服務(wù)器會(huì)明確指定應(yīng)用程序應(yīng)該如何接受這些參數(shù)
  • 應(yīng)用場(chǎng)景：
    • 大數(shù)據(jù)處理，因?yàn)镻OST方法相比GET方法而言，處理更多字段
    • 安全數(shù)據(jù)，因?yàn)镚ET方法將表單參數(shù)直接放在應(yīng)用程序的URL中，這樣網(wǎng)絡(luò)窺探者可以很輕松地捕獲它們，還可以從服務(wù)器的日志文件中進(jìn)行摘錄；而POST方法則沒有這方面的漏洞
GET方法
  • 如果采用GET方法，瀏覽器會(huì)與表單處理服務(wù)器建立連接，然后直接在一個(gè)傳輸步驟中發(fā)送所有的表單數(shù)據(jù)：瀏覽器會(huì)將數(shù)據(jù)直接附在表單的action URL之后。這兩者之間用問號(hào)進(jìn)行分隔
  • 應(yīng)用場(chǎng)景：
    • 獲得最佳表單傳輸性能，因?yàn)镚ET發(fā)送只有少數(shù)簡(jiǎn)單字段
    • 簡(jiǎn)單處理，因?yàn)镚ET方法無需處理編碼解碼方法
    • 傳參處理，因?yàn)镚ET方法允許把表單的參數(shù)包括進(jìn)來作為 URL 的一部分
post 和 get 方式的區(qū)別
  • GET后退按鈕/刷新無害，POST數(shù)據(jù)會(huì)被重新提交（瀏覽器應(yīng)該告知用戶數(shù)據(jù)會(huì)被重新提交）。
  • GET書簽可收藏，POST為書簽不可收藏。
  • GET能被緩存，POST不能緩存 。
  • GET編碼類型 application/x-www-form-url，POST編碼類型 application/x-www-form-urlencoded 或 multipart/form-data。為二進(jìn)制數(shù)據(jù)使用多重編碼。
  • GET歷史參數(shù)保留在瀏覽器歷史中。POST參數(shù)不會(huì)保存在瀏覽器歷史中。
  • GET對(duì)數(shù)據(jù)長(zhǎng)度有限制，當(dāng)發(fā)送數(shù)據(jù)時(shí)，GET 方法向 URL 添加數(shù)據(jù)；URL 的長(zhǎng)度是受限制的（URL 的最大長(zhǎng)度是 2048 個(gè)字符）。POST無限制。
  • GET只允許 ASCII 字符。POST沒有限制。也允許二進(jìn)制數(shù)據(jù)。
  • 與 POST 相比，GET 的安全性較差，因?yàn)樗l(fā)送的數(shù)據(jù)是 URL 的一部分。在發(fā)送密碼或其他敏感信息時(shí)絕不要使用 GET ！POST 比 GET 更安全，因?yàn)閰?shù)不會(huì)被保存在瀏覽器歷史或 web 服務(wù)器日志中。GET的數(shù)據(jù)在 URL 中對(duì)所有人都是可見的。POST的數(shù)據(jù)不會(huì)顯示在 URL 中。
  • 更多說明詳見：

自動(dòng)完成 autocomplete

  • autocomplete屬性規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能。當(dāng)用戶在字段開始鍵入時(shí)，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項(xiàng)
  • 注意：IE瀏覽器不支持該屬性，只有元素?fù)碛衝ame屬性，該屬性才有效
<body>
<button id="btn1">打開自動(dòng)完成</button>
<button id="btn2">關(guān)閉自動(dòng)完成</button>
<form method="get" action="#" name="test">
    <p><label>x:<input name="x"></label></p>
    <p><label>y:<input name="y"></label></p>
    <p><button type="submit">Submit</button></p>    
</form>  

<script type="text/javascript">
var oForm = document.forms.test;
btn1.onclick = function(){
    oForm.autocomplete = 'on';
};
btn2.onclick = function(){
    oForm.autocomplete = 'off';
};
</script>
</body>
如何處理由于瀏覽器設(shè)置導(dǎo)致的autocomplete="off"失效的問題?
<form name="testForm" action="save.php" method="post" >
    <!-- 
    失效是因?yàn)闉g覽器內(nèi)部也會(huì)默認(rèn)開啟一個(gè)輸入字段后自動(dòng)補(bǔ)全的功能
    方法一：打開瀏覽器設(shè)置將自動(dòng)完成關(guān)閉

    方法二：只是針對(duì)賬號(hào)和密碼框自動(dòng)完成的處理
    表單中出現(xiàn)了password類型的input標(biāo)簽，chrome和firefox是以這個(gè)為判斷條件來構(gòu)建記住密碼這個(gè)功能的
    因?yàn)闉g覽器以password類型的input標(biāo)簽為識(shí)別標(biāo)準(zhǔn)，那么在輸出頁(yè)面的時(shí)候完全可以把這個(gè)密碼框的type設(shè)置為text，然后在用戶點(diǎn)擊密碼框輸密碼時(shí)，再把這個(gè)密碼框的type再變回password
    -->
    <input type="text" name="password" onfocus="this.type='password';" autocomplete="off">

    <!-- 方法三：修改readonly屬性 -->
    <input type="password" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off">

    <!-- 方法四：autocomplete="nope" 設(shè)置一個(gè)無效的值，除on 或 off之外的一個(gè)任意的值，使瀏覽器放棄對(duì)該屬性的執(zhí)行 -->
    <input type="password" name="password" autocomplete="nope">
</form>

表單驗(yàn)證 novalidate

  • novalidate屬性規(guī)定當(dāng)提交表單時(shí)不對(duì)其進(jìn)行驗(yàn)證
  • 注意：IE9-不支持
<body>
<button id="btn1">打開驗(yàn)證</button>
<button id="btn2">關(guān)閉驗(yàn)證</button>
<form method="get" action="#" name="test">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
</form>    

<script type="text/javascript">
var oForm = document.forms.test;
btn1.onclick = function(){
    oForm.removeAttribute('novalidate');
};
btn2.onclick = function(){
    oForm.setAttribute('novalidate', '');
};
</script>
</body>

如何無刷新提交表單

  • 在頁(yè)面設(shè)置一個(gè) iframe，設(shè)置好它的 name 屬性值，用css控制它是“消失”的
  • 設(shè)置 form 的 target 屬性為 iframe 的 name 屬性即可

應(yīng)用（創(chuàng)建一個(gè)披薩預(yù)定表單）

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font: 15px "Microsoft Yahei";
        }

        div{
            margin: 50px;
            width: 300px;
            padding: 10px;
            border: 2px solid green;
        }

        div form h3{
            font-size: 20px;
            font-weight: bolder;
            text-align: center;
        }

        div form p{
            margin-top: 10px;
        }

        div form fieldset{
            margin-top: 10px;
            padding: 5px;
            border: 1px solid #ccc;
        }

        div form fieldset label{
            margin: 0 10px 0 5px ;
        }

        .submit{
            width: 70px;
            height: 25px;
            background: orange;
            border: none;
            color: white;
            line-height: 25px;
            font-size: 12px;
            margin-left: 220px;
        }
    </style>
</head>
<body>
<div>
    <form name="pizza" method="post" action="https//:pizza.example.com/order" enctype="application/x-www-form-urlencoded" autocomplete="on">
        <h3>披薩預(yù)定表單</h3>
        <p><label>姓名：<input type="text" name="custname" required></label></p>    <!-- label 為內(nèi)聯(lián)元素，我們可以將一行信息看成段落，包裹在 p 塊狀元素內(nèi) -->
        <p><label>電話：<input type="tel" name="custtel" required></label></p> <!-- 將 input 元素寫在 label 元素內(nèi)，相當(dāng)于將它們兩個(gè)綁定了起來 -->
        <p><label>郵箱：<input type="email" name="custemail" required></label></p>     <!-- 塊狀元素可以包含行內(nèi)元素和塊狀元素，但行內(nèi)元素不能包含塊狀元素，input 屬于內(nèi)聯(lián)塊狀元素 -->
        <fieldset>
            <legend> 披薩大小 </legend>
            <label><input type="radio" name="size" value="small" required> 小 </label>
            <label><input type="radio" name="size" value="medium" required> 中 </label>
            <label><input type="radio" name="size" value="large" required> 大 </label>
        </fieldset>
        <fieldset>
            <legend> 披薩配料 </legend>
            <label><input type="checkbox" name="topping" value="bacon"> 熏肉 </label>
            <label><input type="checkbox" name="topping" value="cheese"> 奶酪 </label>
            <label><input type="checkbox" name="topping" value="onion"> 洋蔥 </label>
            <label><input type="checkbox" name="topping" value="mushroom"> 蘑菇 </label>
        </fieldset>
        <p><label>配送時(shí)間：<input type="time" name="delivery" min="11:00" max="21:00" step="900" required></label></p>   <!-- step 單位為秒，900相當(dāng)于 15分鐘 -->
        <p><input class="submit" type="submit" value="提交訂單"></p>
    </form>
</div>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 什么是FORM表單： 表單是用來提交資料、意見，規(guī)范流程執(zhí)行過程的格式。表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。一個(gè)表單...
    PYFang閱讀 1,226評(píng)論 0贊 0
  • HTML表單 在HTML中，表單是 ... 之間元素的集合，它們?cè)试S訪問者輸入文本、選擇選項(xiàng)、操作對(duì)象等等，然后將...
    蘭山小亭閱讀 3,497評(píng)論 2贊 14
  • 1.form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？ HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 974評(píng)論 0贊 1
  • 在上一個(gè)章節(jié)，我們已經(jīng)創(chuàng)建了一個(gè)基礎(chǔ)的Blog程序。現(xiàn)在我們將使用一些Dajngo高級(jí)功能，去實(shí)現(xiàn)一個(gè)完整的blo...
    金金剛狼閱讀 3,743評(píng)論 1贊 12
  • 本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.在HTML中，表單是由form元素來表示的，但是在jav...
    linfree閱讀 2,329評(píng)論 3贊 17

友情鏈接更多精彩內(nèi)容