<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          Html5中input新增的表單元素和屬性介紹。

          時間:?2017-11-09閱讀:?1806標簽:?表單

          input標簽主要用于Web表單的創建交互,以便接受來自用戶的數據。 我們通過更改type屬性的值,來實現不同的輸入類型。在以前的寫法中表單元素必須放在form元素所包含的里面,而在html5中,我們可以把它們寫在頁面上的任何一個地方,只需要給該元素增加一個form屬性,form屬性的值為form表單的id。例如:

          <form method="get" id="test">  
                <input type="text" name="name"/>  
                <input type="password" name="password"/>  
                <input type="submit" value="提交">  
           </form>  
          <input type="text" name="confirm" form="test">


          html5新增表單屬性 

          color:用于指定顏色的控件。

          date:用于輸入日期的控件(年,月,日,不包括時間)。 

          datetime:基于 UTC 時區的日期時間輸入控件(時,分,秒及幾分)。

          datetime-local:用于輸入日期時間控件,不包含時區。 

          email:用于編輯 e-mail 的字段。 合適的時候可以使用 :valid 和 :invalid CSS 偽類。

          month:用于輸入年月的控件,不帶時區。

          number: 用于輸入浮點數的控件。

          range:用于輸入不精確值控件。如果未指定相應的屬性,控件使用如下缺省值: min:0 max:100 value:min + (max-min)/2,或當 max 小于 min 時使用。

          search:用于輸入搜索字符串的單行文本字段。換行會被從輸入的值中自動移除。

          tel:用于輸入電話號碼的控件;換行會被自動從輸入的值中移除A,但不會執行其他語法。可以使用屬性,比如 pattern 和 maxlength 來約束控件輸入的值。恰當的時候,可以應用 :valid 和 :invalid CSS 偽類。

          time:用于輸入不含時區的時間控件。

          url:用于編輯URL的字段。換行會被自動從輸入值中移隊。可以使用如:pattern 和 maxlength 樣的屬性來約束輸入的值。 恰當的時候使可以應用 :valid 和 :invalid CSS 偽類。

          week:用于輸入一個由星期-年組成的日期,日期不包括時區。

          使用上述屬性的時候,當在表單提交,和觸發填寫時候,支持html5的瀏覽器會提示類型是否正確,如果沒有設置novalidate屬性當輸入不正確是無法提交的。不支持的將以默認屬性"text"。


          html5新增form 屬性

          autocomplete: 屬性規定輸入字段是否應該啟用自動完成功能。自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時,瀏覽器基于之前鍵入過的值,應該顯示出在字段中填寫的選項。<form autocomplete="on|off">

          novalidate :屬性規定當提交表單時不對其進行驗證。如果使用該屬性,則表單不會驗證表單的輸入。<form novalidate="novalidate">

           

          input 屬性

          屬性描述
          acceptmime_type規定通過文件上傳來提交的文件的類型。
          align
          • left
          • right
          • top
          • middle
          • bottom
          不贊成使用。規定圖像輸入的對齊方式。
          alttext定義圖像輸入的替代文本。
          autocomplete
          • on
          • off
          規定是否使用輸入字段的自動完成功能。
          autofocusautofocus

          規定輸入字段在頁面加載時是否獲得焦點。

          (不適用于 type="hidden")

          checkedchecked規定此 input 元素首次加載時應當被選中。
          disableddisabled當 input 元素加載時禁用此元素。
          formformname規定輸入字段所屬的一個或多個表單。
          formactionURL

          覆蓋表單的 action 屬性。

          (適用于 type="submit" 和 type="image")

          formenctype見注釋

          覆蓋表單的 enctype 屬性。

          (適用于 type="submit" 和 type="image")

          formmethod
          • get
          • post

          覆蓋表單的 method 屬性。

          (適用于 type="submit" 和 type="image")

          formnovalidateformnovalidate

          覆蓋表單的 novalidate 屬性。

          如果使用該屬性,則提交表單時不進行驗證。

          formtarget
          • _blank
          • _self
          • _parent
          • _top
          • framename

          覆蓋表單的 target 屬性。

          (適用于 type="submit" 和 type="image")

          height
          • pixels
          • %
          定義 input 字段的高度。(適用于 type="image")
          listdatalist-id引用包含輸入字段的預定義選項的 datalist 。
          max
          • number
          • date

          規定輸入字段的最大值。

          請與 "min" 屬性配合使用,來創建合法值的范圍。

          maxlengthnumber規定輸入字段中的字符的最大長度。
          min
          • number
          • date

          規定輸入字段的最小值。

          請與 "max" 屬性配合使用,來創建合法值的范圍。

          multiplemultiple如果使用該屬性,則允許一個以上的值。
          namefield_name定義 input 元素的名稱。
          patternregexp_pattern

          規定輸入字段的值的模式或格式。

          例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。

          placeholdertext規定幫助用戶填寫輸入字段的提示。
          readonlyreadonly規定輸入字段為只讀。
          requiredrequired指示輸入字段的值是必需的。
          sizenumber_of_char定義輸入字段的寬度。
          srcURL定義以提交按鈕形式顯示的圖像的 URL。
          stepnumber規定輸入字的的合法數字間隔。
          type
          • button
          • checkbox
          • file
          • hidden
          • image
          • password
          • radio
          • reset
          • submit
          • text
          規定 input 元素的類型。
          valuevalue規定 input 元素的值。
          width
          • pixels
          • %
          定義 input 字段的寬度。(適用于 type="image")


          在下面的案例中,我們對一些常用的屬性做了解釋:

          <body>
          	<!--
          		placeholder:用于在文本框未輸入時提示作用
          		autofocus:用于控件自動獲取焦點
          	-->
          	<input type="search" name="key" value="" results="s" placeholder="君樂寶" autofocus="true">
          	<input type="button" name="" value="搜索"><br>
          	<!--
          		novalidate:在控件中加入了required、emial、url等驗證后,如果想讓這些驗證失效,可以在表單中將novalidate設置為tyue
          	-->
          	<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
          		<!--
          			required:必填
          			autocomplete:在網頁的文本框中輸入部分內容或者雙節時,經常會看到在下面顯示輸入過的內容,
          			這就是html5的新特性:自動完成,如果不想使用此功能,將其設置為off即可
          		-->
          		<input type="text" name="UserName" value="" required autocomplete="off"><br>
          		<!--
          			multiple:在選擇文件時,默認只能單選,加上這個屬性后,則可以使用鼠標選中多個文件進行上傳
          		-->
          		<label>選擇文件</label>
          		<input type="file" name="upload" value="" multiple="multiple"><br>
          		<!--
          			list:這個屬性要和datalist元素一起使用,指定此文本框的可選擇項,另外其相較于select的優點在于還可以輸入
          		-->
          		<label>區號:</label>
          		<input type="text" name="age" value="" list="list1"><br>
          		<datalist id="list1">
          	        <option value="0312">保定</option>
          	        <option value="0311">石家莊</option>
          	        <option value="010">北京</option>
          	        <option value="0313">唐山</option>
          	    </datalist>
          		<!--
          			formaction:可以更改點擊此按鈕式提交到服務器的處理程序
          			formmethod:可以更改向服務器提交數據的方式
          		-->
          		<input type="submit" name="subsave" value="提交">
          		<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
          	</form>
          </body>


           完結~~~~~~~~~~~~~


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/70

          如何利用 策略模式 優化表單驗證

          在做移動端項目開發的時候,經常會遇到各種表單驗證,有時候不同的頁面,驗證規則是一樣的;之前項目里的驗證代碼寫的很凌亂,最近剛好遇到這個模塊的功能需要重構

          javascript中如何判斷checkbox是否選中?

          javascript判斷checkbox是否選中的方法:1、直接通過checkbox的checked屬性判斷。2、調用jQuery使用attr()或is()方法判斷。對于在js中來判斷checkbox是否被選中很簡單,示例如下:

          表單提交type=submit和type=image的區別

          type=image默認是sumbit,不用再添加onclick事件提交,否則會發生表單被提交兩次的情況;在onclick事件中添加重置方法

          form表單input回車提交問題

          文本框輸入完成后點擊回車頁面刷新,問題出在form上,當表單中只有一個文本框的時候獲取焦點并點擊回車之后會提交表單內容,就會發生刷新事件。

          vue表單校驗

          兩個文件,一個寫邏輯,一個寫校驗規則;特點:邏輯簡單,代碼量少,夠用;不想看代碼直接新建這兩個文件復制代碼,看最下面的使用方法;

          layui在form表單不回調的問題

          在使用layui進行ajax表單提交時,不回調,并且刷新了當前頁面。在表單提交后添加 代碼 return false;form.on()表單監控事件中一定要加 return false;

          js如何獲取checkbox被選中的值?

          通過復選框的name屬性,遍歷后將被選中的復選框的值輸出:checkbox[index].nextSibling.nodeValue: 獲取的是checkbox中標簽包裹的文本值,建立一個數組,使用push 方法將被選中的元素保存到數組

          JS使用textarea模擬post提交表單

          textarea代表HTML表單多行輸入域,textarea標簽是成對出現的,以<textarea>開始,以</textarea>結束。cols -- 多行輸入域的列數,rows -- 多行輸入域的行數

          HTML5表單新特性

          HTML5表單新特性之——新的input typeEmail:郵件輸入域,在表單提交時提供簡單的郵箱格式驗證,并彈出一個提示礦口(可定制內容不能定制樣式),url:URL地址輸入域。在表單提交時提供簡單的URL地址格式驗證

          AntDesign表單的理解與使用

          雖然 react 沒有內置的表單驗證邏輯,但是我們可以使用 react 組件庫 AntDesign 中的表單組件 Form 來實現這一需求。具體地, AntDesign 中的表單組件 Form 與表單域 Form.Item(用于包裹任意輸入控制的容器)配合使用:

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网