|
網(wǎng)絡(luò)前端高薪的誘惑，學(xué)習(xí)門(mén)檻低，不管是學(xué)生黨還是工作者，都渴望憑借自己的能力，空閑的時(shí)間，去學(xué)前端。也許是一種愛(ài)好，也許是一種想從事的工作。但它真的那么簡(jiǎn)單嗎？現(xiàn)在，初級(jí)前端的工作，已接近飽和，并處于供過(guò)于求的狀態(tài)，企業(yè)更需要的是具備扎實(shí)的基礎(chǔ)，至少具備后端技能的前端開(kāi)發(fā)工程師。已不像之前所說(shuō)的美工，美工了。在許多大企業(yè)中，前端開(kāi)發(fā)崗位是獨(dú)立的，需要專(zhuān)業(yè)技能。 HTML5表單屬性HTML5新的表單屬性HTML5的<form>和<input>標(biāo)簽添加了幾個(gè)新屬性. <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)完成功能。 當(dāng)用戶(hù)在自動(dòng)完成域中開(kāi)始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫(xiě)的選項(xiàng)。 提示:autocomplete屬性有可能在form元素中是開(kāi)啟的，而在input元素中是關(guān)閉的。 注意:autocomplete適用于<form>標(biāo)簽，以及以下類(lèi)型的<input>標(biāo)簽：text,search,url,telephone,email,password,datepickers,range以及color。
HTMLform中開(kāi)啟autocomplete(一個(gè)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> 提示:某些瀏覽器中，您可能需要啟用自動(dòng)完成功能，以使該屬性生效。 <form>novalidate屬性novalidate屬性是一個(gè)boolean(布爾)屬性. novalidate屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證form或input域。
無(wú)需驗(yàn)證提交的表單數(shù)據(jù) <form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"></form> <input>autofocus屬性autofocus屬性是一個(gè)boolean屬性. autofocus屬性規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。
讓"Firstname"input輸入域在頁(yè)面載入時(shí)自動(dòng)聚焦： First name:<input type="text" name="fname" autofocus> <input>form屬性form屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單。 提示:如需引用一個(gè)以上的表單，請(qǐng)使用空格分隔的列表。
位于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屬性會(huì)覆蓋<form>元素中的action屬性. 注意:Theformaction屬性用于type="submit"和type="image".
以下HTMLform表單包含了兩個(gè)不同地址的提交按鈕： <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ù)編碼(只對(duì)form表單中method="post"表單) formenctype屬性覆蓋form元素的enctype屬性。 主要:該屬性與type="submit"和type="image"配合使用。
第一個(gè)提交按鈕已默認(rèn)編碼發(fā)送表單數(shù)據(jù)，第二個(gè)提交按鈕以"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"配合使用。
重新定義表單提交方式實(shí)例: <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屬性是一個(gè)boolean屬性. novalidate屬性描述了<input>元素在表單提交時(shí)無(wú)需被驗(yàn)證。 formnovalidate屬性會(huì)覆蓋<form>元素的novalidate屬性. 注意:formnovalidate屬性與type="submit一起使用
兩個(gè)提交按鈕的表單(使用與不適用驗(yàn)證): <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="提交"><br> <input type="submit" formnovalidate value="不驗(yàn)證提交"></form> <input>formtarget屬性formtarget屬性指定一個(gè)名稱(chēng)或一個(gè)關(guān)鍵字來(lái)指明表單提交數(shù)據(jù)接收后的展示。 Theformtarget屬性覆蓋<form>元素的target屬性. 注意:formtarget屬性與type="submit"和type="image"配合使用.
兩個(gè)提交按鈕的表單,在不同窗口中顯示: <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="提交到一個(gè)新的頁(yè)面上"></form> <input>height和width屬性height和width屬性規(guī)定用于image類(lèi)型的<input>標(biāo)簽的圖像高度和寬度。 注意:height和width屬性只適用于image類(lèi)型的<input>標(biāo)簽。 提示:圖像通常會(huì)同時(shí)指定高度和寬度屬性。如果圖像設(shè)置高度和寬度，圖像所需的空間在加載頁(yè)時(shí)會(huì)被保留。如果沒(méi)有這些屬性，瀏覽器不知道圖像的大小，并不能預(yù)留適當(dāng)?shù)目臻g。圖片在加載過(guò)程中會(huì)使頁(yè)面布局效果改變（盡管圖片已加載）。
定義了一個(gè)圖像提交按鈕,使用了height和width屬性: <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> <input>list屬性list屬性規(guī)定輸入域的datalist。datalist是輸入域的選項(xiàng)列表。
在<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類(lèi)型規(guī)定限定（約束）。 注意:min、max和step屬性適用于以下類(lèi)型的<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屬性是一個(gè)boolean屬性. multiple屬性規(guī)定<input>元素中可選擇多個(gè)值。 注意:multiple屬性適用于以下類(lèi)型的<input>標(biāo)簽：email和file:
上傳多個(gè)文件: Select images: <input type="file" name="img" multiple> <input>pattern屬性pattern屬性描述了一個(gè)正則表達(dá)式用于驗(yàn)證<input>元素的值。 注意:pattern屬性適用于以下類(lèi)型的<input>標(biāo)簽:text,search,url,tel,email,和password. 提示：是用來(lái)全局title屬性描述了模式.
下面的例子顯示了一個(gè)只能包含三個(gè)字母的文本域（不含數(shù)字及特殊字符）： Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><input>placeholder屬性placeholder屬性提供一種提示（hint），描述輸入域所期待的值。 簡(jiǎn)短的提示在用戶(hù)輸入值前會(huì)顯示在輸入域上。 注意:placeholder屬性適用于以下類(lèi)型的<input>標(biāo)簽：text,search,url,telephone,email以及password。
input字段提示文本t: <input type="text" name="fname" placeholder="First name"> <input>required屬性required屬性是一個(gè)boolean屬性. required屬性規(guī)定必須在提交之前填寫(xiě)輸入域（不能為空）。 注意:required屬性適用于以下類(lèi)型的<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)建一個(gè)區(qū)域值. 注意:step屬性與以下type類(lèi)型一起使用:number,range,date,datetime,datetime-local,month,time和week.
規(guī)定inputstep步長(zhǎng)為3: <input type="number" name="points" step="3"> HTML5<input>標(biāo)簽HTML<form>標(biāo)簽 帶有兩個(gè)輸入字段和一個(gè)提交按鈕的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)簽 一個(gè)簡(jiǎn)單的HTML表單，包含兩個(gè)文本輸入框和一個(gè)提交按鈕： <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> 以上就是中級(jí)Web教程：HTML5表單屬性的全部?jī)?nèi)容， |
|
|
來(lái)自： 碼農(nóng)9527 > 《WEB》
