html5--3.7 input元素(6)
生活随笔
收集整理的這篇文章主要介紹了
html5--3.7 input元素(6)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html5--3.7 input元素(6)
學習要點
- input元素及其屬性
input元素
- 用來設置表單中的內容項，比如輸入內容的文本框，按鈕等
- 不僅可以布置在表單中，也可以在表單之外的元素使用
input元素的屬性
- type屬性：指定輸入內容的類型，默認為text:單行文本框
?
- name屬性:輸入內容的識別名稱，傳遞參數時候的參數名稱
?
- value屬性:默認值
?
- maxlength:輸入的最大字數
- readonly屬性：只讀屬性，設置內容不可變更，提交時會以前發送至服務器
- disabled屬性：設置為不可用（不可操作）
- required屬性：設置該內容為必須填寫項，否則無法提交
- placeholder屬性：設置默認值，當文本框獲得焦點時被清空，對text/url/tel/email//password/search有效
- autocomplet屬性：屬性值為on/off,定義是否開啟瀏覽器自動記憶功能
- autofocus屬性：自動獲得焦點
input的其他屬性還有很多，我們放在案例中逐步講解，暫時先了解這三個
type屬性z值
- 默認為text
?
- password：密碼狀態輸入
?
- submit:提交按鈕，點擊將數據發送至服務器
- reset:重置按鈕
- button:普通按鈕
- imge：圖片式提交按鈕
- hidden；隱藏字段
- 該內容不會顯示頁面上
- 一般為網頁設計者設置的變量數據，提交時，隱藏內容會提交到服務器
- 關于hidden暫時只了解這么多，以后用到的時候再詳細說
- email:表示要輸入一個電子郵箱
- 這是HTML5新增的元素
- 他會對輸入內容進行驗證，在之前需要編寫大段的JS代碼來進行這項工作
- 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
- url:表示要輸入一個網址
- 這是HTML5新增的
- 他會對輸入內容進行驗證，在之前需要編寫大段的JS代碼來進行這項工作
- 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
- tel:表示輸入的內容是一個電話號碼
- 這是HTML5新增的
- 他不會對輸入內容進行驗證
- 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
- number:
- 這是HTML5新增的
- 可以配合input的max/min/step/value規定允許輸入的最大值/最小值/步長/默認值
- 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
- range(活動條)
- 這是HTML5新增的；與number類型類似，也是表示一定范圍的數值輸入，但是以一個活動條的狀態顯示
- 可以配合input的max/min/step/value規定的最大值/最小值/步長/默認值
- 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
- 時間類
- 這是HTML5新增的；
- 包括datetime(UTC時間)/datetime-local(時間+日期)/date(年月日)/month(年月)/week(年周)/time(時分秒)
- 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
- color
- 這是HTML5新增的；
- 可以建立一個顏色的選擇輸入框
- 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
?
代碼:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>L3_6</title> 6 </head> 7 <form action="L3_01.html" method="get"> 8 <!-- 9 輸入購買數：<input type="number" min="5" max="56" step="5" name="number"><br> 10 請選擇個數：<input type="range" min="0" max="100" value="90" name="range"><br><br> 11 --> 12 時間：<input type="time" name="time"><br> 13 日: <input type="date" name="date"><br> 14 周： <input type="week" name="week"><br> 15 月： <input type="month" name="month"><br> 16 顏色： <input type="color" name="color"> 17 <br><br><input type="submit" value="確定"> 18 </form> 19 20 <body> 21 </body> 22 </html> View Code?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/7934055.html
總結
以上是生活随笔為你收集整理的html5--3.7 input元素(6)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux这样去掉文件里高亮字体
- 下一篇： MATLAB函数拟合指令,MATLAB拟