網(wǎng)絡(luò)前端高薪的誘惑，學(xué)習(xí)門檻低，不管是學(xué)生黨還是工作者，都渴望憑借自己的能力，空閑的時間，去學(xué)前端。也許是一種愛好，也許是一種想從事的工作。但它真的那么簡單嗎？現(xiàn)在，初級前端的工作，已接近飽和，并處于供過于求的狀態(tài)，企業(yè)更需要的是具備扎實的基礎(chǔ)，至少具備后端技能的前端開發(fā)工程師。已不像之前所說的美工，美工了。在許多大企業(yè)中，前端開發(fā)崗位是獨立的，需要專業(yè)技能。

    HTML5表單屬性

    HTML5新的表單屬性

    HTML5的<form>和<input>標(biāo)簽添加了幾個新屬性.

    <form>新屬性：

    autocomplete

    novalidate

    <input>新屬性：

    autocomplete

    autofocus

    form

    formaction

    formenctype

    formmethod

    formnovalidate

    formtarget

    height與width

    list

    min與max

    multiple

    pattern(regexp)

    placeholder

    required

    step

    <form>/<input>autocomplete屬性

    autocomplete屬性規(guī)定form或input域應(yīng)該擁有自動完成功能。

    當(dāng)用戶在自動完成域中開始輸入時，瀏覽器應(yīng)該在該域中顯示填寫的選項。

    提示:autocomplete屬性有可能在form元素中是開啟的，而在input元素中是關(guān)閉的。

    注意:autocomplete適用于<form>標(biāo)簽，以及以下類型的<input>標(biāo)簽：text,search,url,telephone,email,password,datepickers,range以及color。

    HTMLform中開啟autocomplete(一個input字段關(guān)閉autocomplete):

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit"></form>

    提示:某些瀏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。

    <form>novalidate屬性

    novalidate屬性是一個boolean(布爾)屬性.

    novalidate屬性規(guī)定在提交表單時不應(yīng)該驗證form或input域。

    無需驗證提交的表單數(shù)據(jù)

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit"></form>

    <input>autofocus屬性

    autofocus屬性是一個boolean屬性.

    autofocus屬性規(guī)定在頁面加載時，域自動地獲得焦點。

    讓"Firstname"input輸入域在頁面載入時自動聚焦：

First name:<input type="text" name="fname" autofocus>

    <input>form屬性

    form屬性規(guī)定輸入域所屬的一個或多個表單。

    提示:如需引用一個以上的表單，請使用空格分隔的列表。

    位于form表單外的input字段引用了HTMLform(該input表單仍然屬于form表單的一部分):

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交"></form>
 Last name: <input type="text" name="lname" form="form1">

    <input>formaction屬性

    Theformaction屬性用于描述表單提交的URL地址.

    Theformaction屬性會覆蓋<form>元素中的action屬性.

    注意:Theformaction屬性用于type="submit"和type="image".

    以下HTMLform表單包含了兩個不同地址的提交按鈕：

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交"></form>

    <input>formenctype屬性

    formenctype屬性描述了表單提交到服務(wù)器的數(shù)據(jù)編碼(只對form表單中method="post"表單)

    formenctype屬性覆蓋form元素的enctype屬性。

    主要:該屬性與type="submit"和type="image"配合使用。

    第一個提交按鈕已默認編碼發(fā)送表單數(shù)據(jù)，第二個提交按鈕以"multipart/form-data"編碼格式發(fā)送表單數(shù)據(jù):

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交"></form>

    <input>formmethod屬性

    formmethod屬性定義了表單提交的方式。

    formmethod屬性覆蓋了<form>元素的method屬性。

    注意:該屬性可以與type="submit"和type="image"配合使用。

    重新定義表單提交方式實例:

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交"></form>

    <input>formnovalidate屬性

    novalidate屬性是一個boolean屬性.

    novalidate屬性描述了<input>元素在表單提交時無需被驗證。

    formnovalidate屬性會覆蓋<form>元素的novalidate屬性.

    注意:formnovalidate屬性與type="submit一起使用

    兩個提交按鈕的表單(使用與不適用驗證):

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不驗證提交"></form>

    <input>formtarget屬性

    formtarget屬性指定一個名稱或一個關(guān)鍵字來指明表單提交數(shù)據(jù)接收后的展示。

    Theformtarget屬性覆蓋<form>元素的target屬性.

    注意:formtarget屬性與type="submit"和type="image"配合使用.

    兩個提交按鈕的表單,在不同窗口中顯示:

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank"
  value="提交到一個新的頁面上"></form>

    <input>height和width屬性

    height和width屬性規(guī)定用于image類型的<input>標(biāo)簽的圖像高度和寬度。

    注意:height和width屬性只適用于image類型的<input>標(biāo)簽。

    提示:圖像通常會同時指定高度和寬度屬性。如果圖像設(shè)置高度和寬度，圖像所需的空間在加載頁時會被保留。如果沒有這些屬性，瀏覽器不知道圖像的大小，并不能預(yù)留適當(dāng)?shù)目臻g。圖片在加載過程中會使頁面布局效果改變（盡管圖片已加載）。

    定義了一個圖像提交按鈕,使用了height和width屬性:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

    <input>list屬性

    list屬性規(guī)定輸入域的datalist。datalist是輸入域的選項列表。

    在<datalist>中預(yù)定義<input>值:

<input list="browsers"><datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari"></datalist>

    <input>min和max屬性

    min、max和step屬性用于為包含數(shù)字或日期的input類型規(guī)定限定（約束）。

    注意:min、max和step屬性適用于以下類型的<input>標(biāo)簽：datepickers、number以及range。

    <input>元素最小值與最大值設(shè)置:

Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31">Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02">Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">

    <input>multiple屬性

    multiple屬性是一個boolean屬性.

    multiple屬性規(guī)定<input>元素中可選擇多個值。

    注意:multiple屬性適用于以下類型的<input>標(biāo)簽：email和file:

    上傳多個文件:

Select images: <input type="file" name="img" multiple>

    <input>pattern屬性

    pattern屬性描述了一個正則表達式用于驗證<input>元素的值。

    注意:pattern屬性適用于以下類型的<input>標(biāo)簽:text,search,url,tel,email,和password.

    提示：是用來全局title屬性描述了模式.

    下面的例子顯示了一個只能包含三個字母的文本域（不含數(shù)字及特殊字符）：

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

    <input>placeholder屬性

    placeholder屬性提供一種提示（hint），描述輸入域所期待的值。

    簡短的提示在用戶輸入值前會顯示在輸入域上。

    注意:placeholder屬性適用于以下類型的<input>標(biāo)簽：text,search,url,telephone,email以及password。

    input字段提示文本t:

<input type="text" name="fname" placeholder="First name">

    <input>required屬性

    required屬性是一個boolean屬性.

    required屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。

    注意:required屬性適用于以下類型的<input>標(biāo)簽：text,search,url,telephone,email,password,datepickers,number,checkbox,radio以及file。

    不能為空的input字段:

Username: <input type="text" name="usrname" required>

    <input>step屬性

    step屬性為輸入域規(guī)定合法的數(shù)字間隔。

    如果step="3"，則合法的數(shù)是-3,0,3,6等

    提示：step屬性可以與max和min屬性創(chuàng)建一個區(qū)域值.

    注意:step屬性與以下type類型一起使用:number,range,date,datetime,datetime-local,month,time和week.

    規(guī)定inputstep步長為3:

<input type="number" name="points" step="3">

    HTML5<input>標(biāo)簽

    HTML<form>標(biāo)簽

    帶有兩個輸入字段和一個提交按鈕的HTML表單：

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"></form>

    HTML<input>標(biāo)簽

    一個簡單的HTML表單，包含兩個文本輸入框和一個提交按鈕：

<form action="demo_form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"></form>

    以上就是中級Web教程：HTML5表單屬性的全部內(nèi)容，