整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線:

          html詳解之input


          nput框作為一個(gè)簡(jiǎn)單的輸入框,你對(duì)它的屬性知道有多少?
          常見(jiàn)的屬性(帶new為h5新增屬性):

          1、accept:accept 屬性規(guī)定了可通過(guò)文件上傳提交的服務(wù)器接受的文件類(lèi)型。僅用于input的type類(lèi)型為"file"的時(shí)候。

          屬性值:

          audio/*,音頻

          video/* ,視頻

          image/* ,圖片

          MIME_type,一個(gè)有效的 MIME 類(lèi)型,不帶參數(shù)

            <input type="file" name="pic" accept="image/*" />

          // 如需規(guī)定多個(gè)值,請(qǐng)使用逗號(hào)分隔

          <input  type="file" accept="audio/*,video/*,image/*" />

          2、value:指定元素的value值。

          屬性值:text

          value 屬性對(duì)于不同 input 類(lèi)型,用法也不同:

          • 對(duì)于 "button"、"reset"、"submit" 類(lèi)型 - 定義按鈕上的文本
          • 對(duì)于 "text"、"password"、"hidden" 類(lèi)型 - 定義輸入字段的初始(默認(rèn))值
          • 對(duì)于 "checkbox"、"radio"、"image" 類(lèi)型 - 定義與 input 元素相關(guān)的值,當(dāng)提交表單時(shí)該值會(huì)發(fā)送到表單的 action URL。

          注意:value 屬性對(duì)于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

          注意:value 屬性不適用于 <input type="file">。

          <input value="文本" />

          3、name:表示的該文本輸入框名稱(chēng)。用于表單提交后引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。

          屬性值:text

          <input type="text" name="email" />

          4、size:輸入框的長(zhǎng)度大小。

          屬性值:number

          <input type="text" name="email" size="35" />


          注意:size 屬性適用于下面的 input 類(lèi)型:text、search、tel、url、email 和 password。

          5、maxlength:輸入框中允許輸入字符的最大數(shù)。

          屬性值:number

          <input type="text" name="usrname" maxlength="10" />

          6、readonly:表示該框中只能顯示,不能添加修改。

          <input type="text" name="country" value="中國(guó)" readonly />

          7、required(new):屬性規(guī)定必須在提交表單之前填寫(xiě)輸入字段。

           <input type="text" name="username" required />

          8、alt:定義圖像輸入的替代文本。 (只針對(duì)type="image")

          屬性值:text

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

          9、autocomplete(new):autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能。

          屬性值:on/off,默認(rèn)啟動(dòng)自動(dòng)完成功能。

          <input autocomplete="off" />

          注意:autocomplete 屬性適用于下面的 <input> 類(lèi)型:text、search、url、tel、email、password、datepickers、range 和 color。

          10、autofocus(new):屬性規(guī)定當(dāng)頁(yè)面加載時(shí) <input> 元素應(yīng)該自動(dòng)獲得焦點(diǎn)。

          屬性值:autofocus

          <input type="text"  autofocus />

          11、checked:checked 屬性規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的 <input> 元素。 (只針對(duì) type="checkbox" 或者 type="radio")

          屬性值:checked

          <input type="checkbox" name="vehicle" value="Car" checked />小汽車(chē)

          12、disabled:disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。

          屬性值:disabled

          <input type="text" name="lname" disabled />

          13、form(new): form 屬性規(guī)定 <input> 元素所屬的一個(gè)或多個(gè)表單。

          位于 form 表單外的輸入字段(但仍然屬于 form 表單的一部分):

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

          14、formaction(new):屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。(只針對(duì) type="submit" 和 type="image")

          屬性值:URL

          <input type="submit" formaction="demo-admin.php" value="提交" />

          注意:

          formaction 屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。

          formaction 屬性覆蓋 <form> 元素的 action 屬性。

          15、formenctype(new):屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼(只適合 type="submit" 和 type="image")。

          屬性值:application/x-www-form-urlencoded ;multipart/form-data text/plain

          <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />

          注意:

          formenctype 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼(僅適用于 method="post" 的表單)。

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

          16、formmethod (new):定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")

          屬性值:get / post

          <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />

          17、formnovalidate(new):formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。

          屬性值:formnovalidate

          <input type="submit" formnovalidate="formnovalidate" value="不驗(yàn)證提交">

          18、formtarget (new):規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱(chēng)或關(guān)鍵詞。(只適合 type="submit" 和 type="image")

          屬性值:_blank; _self; _parent; _top; framename

          <input type="submit" formtarget="_blank" value="提交到一個(gè)新的頁(yè)面上">

          19、height (new);width(new):屬性規(guī)定 <input> 元素的高度和寬度。 (只針對(duì)type="image")

          屬性值:pixels

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

          20、max (new);min(new):屬性規(guī)定 <input> 元素的最大值和最小值。

          屬性值:number;date

           <input type="date" name="bday" max="1979-12-31">
            <input type="date" name="bday" min="2000-01-02">  
          <input type="number" name="quantity" min="1" max="5">

          21、multiple (new):屬性規(guī)定允許用戶(hù)輸入到 <input> 元素的多個(gè)值。

          屬性值:multiple

          <input type="file" name="img" multiple>

          注意:multiple 適用于以下 input 類(lèi)型:email 和 file。

          22、pattern (new):pattern 屬性規(guī)定用于驗(yàn)證 <input> 元素的值的正則表達(dá)式。

          屬性值:regexp;

          <form action="demo_form.html">
             Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
             <input type="submit">
          </form>

          23、placeholder (new): 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡(jiǎn)短的提示信息 。

          屬性值:text

          <input placeholder="請(qǐng)輸入姓名" />

          24、src : src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對(duì) type="image")

          屬性值:URL

          <input type="image" src="submit.gif" alt="Submit" />

          25、step (new): step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。

          屬性值:number

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

          26、list(new) :屬性引用 <datalist> 元素,其中包含 <input> 元素的預(yù)定義選項(xiàng)。

          屬性值:datalist_id

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

          27、type: type 屬性規(guī)定要顯示的 <input> 元素的類(lèi)型。

          屬性值:button;checkbox;color;date;datetime;datetime-local;email;file;hidden;image;month;number;password;radio;range;reset;search;submit;tel;text;time;url;week

          type的屬性值眾多,也是用的比較多的一個(gè)。

          button:定義可點(diǎn)擊的按鈕(通常與 JavaScript 一起使用來(lái)啟動(dòng)腳本)。

          checkbox:定義復(fù)選框。

          color(new):定義拾色器。

          date(new):定義 date 控件(包括年、月、日,不包括時(shí)間)。

          datetime(new):定義 date 和 time 控件(包括年、月、日、時(shí)、分、秒、幾分之一秒,基于 UTC 時(shí)區(qū))。

          datetime-local(new):定義 date 和 time 控件(包括年、月、日、時(shí)、分、秒、幾分之一秒,不帶時(shí)區(qū))。

          email(new):定義用于 e-mail 地址的字段。file定義文件選擇字段和 "瀏覽..." 按鈕,供文件上傳。

          hidden:定義隱藏輸入字段。

          image:定義圖像作為提交按鈕。

          month(new):定義 month 和 year 控件(不帶時(shí)區(qū))。

          number(new):定義用于輸入數(shù)字的字段。

          password:定義密碼字段(字段中的字符會(huì)被遮蔽)。

          radio:定義單選按鈕。

          range(new):定義用于精確值不重要的輸入數(shù)字的控件(比如 slider 控件)。

          reset:定義重置按鈕(重置所有的表單值為默認(rèn)值)。

          search(new):定義用于輸入搜索字符串的文本字段。

          submit:定義提交按鈕。

          tel(new):定義用于輸入電話號(hào)碼的字段。

          text:默認(rèn)。定義一個(gè)單行的文本字段(默認(rèn)寬度為 20 個(gè)字符)。

          time(new):定義用于輸入時(shí)間的控件(不帶時(shí)區(qū))。

          url(new):定義用于輸入 URL 的字段。

          week(new):定義 week 和 year 控件(不帶時(shí)區(qū))。

          帶有兩個(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>

          (更多實(shí)例見(jiàn)頁(yè)面底部)


          瀏覽器支持

          所有主流瀏覽器都支持 <form> 標(biāo)簽。


          標(biāo)簽定義及使用說(shuō)明

          <form> 標(biāo)簽用于創(chuàng)建供用戶(hù)輸入的 HTML 表單。

          <form> 元素包含一個(gè)或多個(gè)如下的表單元素:

          • <input>

          • <textarea>

          • <button>

          • <select>

          • <option>

          • <optgroup>

          • <fieldset>

          • <label>


          HTML 4.01 與 HTML5之間的差異

          HTML5 新增了兩個(gè)新的屬性:autocomplete 和 novalidate,同時(shí)不再支持 HTML 4.01 中的某些屬性。


          HTML 與 XHTML 之間的差異

          在 XHTML 中,name 屬性已被廢棄。使用全局 id 屬性代替。


          屬性

          New :HTML5 中的新屬性。

          屬性描述
          acceptMIME_typeHTML5 不支持。規(guī)定服務(wù)器接收到的文件的類(lèi)型。(文件是通過(guò)文件上傳提交的)
          accept-charsetcharacter_set規(guī)定服務(wù)器可處理的表單數(shù)據(jù)字符集。
          actionURL規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)。
          autocompleteNewonoff規(guī)定是否啟用表單的自動(dòng)完成功能。
          enctypeapplication/x-www-form-urlencodedmultipart/form-datatext/plain規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼。(適用于 method="post" 的情況)
          methodgetpost規(guī)定用于發(fā)送表單數(shù)據(jù)的 HTTP 方法。
          nametext規(guī)定表單的名稱(chēng)。
          novalidateNewnovalidate如果使用該屬性,則提交表單時(shí)不進(jìn)行驗(yàn)證。
          target_blank_self_parent_top規(guī)定在何處打開(kāi) action URL。

          全局屬性

          <form> 標(biāo)簽支持 HTML 的全局屬性。


          事件屬性

          <form> 標(biāo)簽支持 HTML 的事件屬性。

          實(shí)例

          帶有復(fù)選框的表單

          此表單包含兩個(gè)復(fù)選框和一個(gè)提交按鈕。

          帶有單選按鈕的表單

          此表單包含兩個(gè)單選框和一個(gè)提交按鈕。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          文章介紹了html標(biāo)簽里的input標(biāo)簽和label標(biāo)簽的美化效果!效果圖如下:

          用在復(fù)選框中選擇,個(gè)性化了復(fù)選框的默認(rèn)樣式,增強(qiáng)用戶(hù)體驗(yàn)!

          實(shí)現(xiàn)方法也非常簡(jiǎn)單

          下面看看代碼

          html:

          css:


          主站蜘蛛池模板: 糖心vlog精品一区二区三区| 久久se精品一区二区国产| 免费一区二区三区在线视频| 一区二区在线视频| 人妻免费一区二区三区最新| 末成年女AV片一区二区| 中文字幕一区二区三区精彩视频| 亚洲熟妇AV一区二区三区浪潮| 亚洲AV无码一区二区三区牲色 | 国产一区二区三区四| 一区二区三区免费在线观看| 国产在线一区二区| 国产主播福利一区二区| 一级特黄性色生活片一区二区| 国产亚洲一区二区三区在线观看 | 国产品无码一区二区三区在线| 国产在线精品一区二区| 亚洲AV无码一区二区三区在线观看| 无码av不卡一区二区三区| 日韩免费视频一区二区| 少妇人妻精品一区二区| 在线观看午夜亚洲一区| 国产激情一区二区三区小说 | 久久久久无码国产精品一区| 久久一区二区三区精华液使用方法| 无码毛片一区二区三区视频免费播放 | 亚洲午夜日韩高清一区| 久久久久人妻一区二区三区| 韩国精品一区视频在线播放| 亚洲一区AV无码少妇电影☆| 91精品福利一区二区| 中文字幕aⅴ人妻一区二区| 国产成人精品视频一区| 日韩精品无码一区二区三区免费 | 美女免费视频一区二区三区| 日本内射精品一区二区视频| 爆乳熟妇一区二区三区霸乳| 亚洲AV成人精品一区二区三区| 亚洲熟妇av一区二区三区漫画 | 一级毛片完整版免费播放一区| 国产精品分类视频分类一区|