基礎輸入框，搜索框
<input type="text"/>
密碼輸入框，搜索框，type="password"
<input type="password"/>
隱藏框文本框，type="hidden"
<input type="hidden">
用於輸入數字的文本框，type="number" name="" id="" step="1" min="1" max="10"
<input type="number" name="" id="" step="1" min="1" max="10">
數字滑動選擇框，type="range" name="" id="" step="1" min="1" max="10"
<input type="range" name="" id="" step="1" min="1" max="10">
用於輸入email的文本框，當表單提交時會觸發格式驗證，type="email"
<input type="email" name="" id="">
用於輸入url地址的文本框，會觸發格式驗證，type="url"
<input type="url" name="" id="">
用於輸入電話的文本框，會觸發格式驗證，type="tel" pattern="1\d{10}"
<input type="tel" name="" id="" pattern="1\d{10}">
用於輸入日期的文本框，type="date"
<input type="date" name="" id="" >
帶默認日期的文本框，value="2010-06-06"
<input type="date" name="" id="" value="2010-06-06">
用於輸入時間的文本框，type="time"
<input type="time" name="" id="" >
帶默認時間的文本框，value="12:00"
<input type="time" name="" id="" value="12:00">
用於輸入日期和時間的文本框，type="datetime-local"
<input type="datetime-local" name="" id="" >
帶默認日期和時間的文本框，value="2010-066-06T12:00"
<input type="datetime-local" name="" id="" value="2010-06-06T12:00">
用於輸入月份的文本框，type="month"
<input type="month" name="" id="">
帶默認月份的文本框，value="2010-06"
<input type="month" name="" id="" value="2010-06">
用於輸入第幾周的文本框,type="week"
<input type="week" name="" id="">
帶默認第幾周的文本框,value="2010-W12"
<input type="week" name="" id="" value="2010-W12">
顏色選擇框,type="color"
<input type="color" name="" id="">
和刷新差很少，value中的提交能夠根據相應狀況進行更改，能夠不用輸入value，默認爲提交
<input type="submit" value="提交">
<input type="text" name="username" id="">
帶默認內容的文本框，value="默認的內容"，此內容至關於已輸入文字，須要刪除，不是背景文字
<input type="text" name="" id="" value="默認的內容">
placeholder屬性可指定，當文本框無內容時，顯示其中內容，placeholder="請填寫帳號"
<input type="text" name="" id="" placeholder="請填寫帳號">
制定最小最大字符數的文本框，必須寫這麼少或只能寫這麼多字符，minlength="1" maxlength="6"
<input type="text" name="" id="" minlength="1" maxlength="6">
密碼框，type="password"
<input type="password" name="password" id="" placeholder="請輸入密碼">
文件選擇框，點擊會自動彈出本地文件選擇，type="file"
<input type="file" name="" id="" placeholder="請插入文本">
placeholder：在它裏面輸入的文本都會是背景文字，你們有沒有發現本身表單沒有寫東西的時候會有一些提示文字？其實就是它裏面的文字。
看了這麼多input是否是頭都大了？不要緊，還有呢（害羞），放心，此次給圖。
這是type="radio"的單選框樣式，你們有沒有發現一個選擇裏面會有A、B、C、D等等多種選擇，在其中你點擊了一個你所選的另外一個就消失了，這就是單選框。url
以上爲input單選框的兩種樣式，你們看本身以爲本身用那種方便快捷就用哪一種吧（鄙人比較喜歡第二種，包括下面多選款也用的第二種樣式）。orm
固然value就是後臺人員給的鏈接路徑啦，至於id中的內容，天然就是寫CSS樣式的代名了。視頻
這就是多選框啦，（裏面的內容只是隨手寫的，請不要當真）htm
嗯，input的基本知識就在這裏啦，還有那麼一點，也給你們隨手提一下吧：blog
1.圖片
你們是否是在某些視頻軟件中找電影會看到本身輸入文本前面有張圖片，或者登陸的時候前面有個「用戶名：」什麼的。
其實差很少就是這麼作出來的，上面我用的是div包裹input而已，還有其餘方式，你們能夠多多組合嘗試。
2.
你們有沒有發現本身點擊輸入框的時候有的會邊框亮光，有的邊框不會，其實在html5中input是默認爲點擊邊框發亮的，要向清除也很容易，使用這串代碼就能夠了：
outline: medium;
是否是很輕鬆，好了input的知識就先說到這裏，還有其餘知識呢：
button：這就是按鈕，好比說咱們平時的登陸按鈕啊什麼的（固然不是超連接a標籤啦），在這裏面能夠插圖，同樣也能夠說輸入文字什麼的。
不過要注意一點，不要使用a標籤包裹button按鈕，由於button按鈕默認自帶一個刷新頁面的效果，若是用a標籤包裹button按鈕，button就會覆蓋a標籤的鏈接效果（其實你們能夠反過來用嘛，用button包裹a標籤就好啦）。
你們知不知道，其實大家最後的那些建議輸入框其實也是input輸入框，只不過引入的格式不一樣而已，在input type="text"中若是沒有設定其它格式（就算你設置了也沒用，由於只有這一種辦法），那麼它的文本是默認爲居中的，無論你設定多高的高度，它也會在中間顯示，而且！不會換行！！！
固然，看到我上面的圖片了嗎？這樣的樣式它就能夠換行了，並且默認是左上角輸入哦，至於cols和rows就是它的寬高了（悄悄透露一句，它的寬高實際上是能夠自動拉伸的哦~）
下拉列表：
不知你們有沒有想到，本身再填住址之類的信息的時候，會有一些下拉列表。
噥，就是我上面的這種格式，看到了嗎簡單而又複雜。
瀏覽器搜索下拉列表：
看到下拉列表，你們應該也能想到瀏覽器搜索框吧，本身在瀏覽器搜索框裏面輸入哪怕是一個字，它也能也你下拉出來一堆連接內容對不對。
請看下面：
就是這種格式（這裏面只是我隨手寫的，不要當真哈），在這裏面value表明着鏈接，其實咱們搜索的東西就是value裏面的連接（這些後臺會給你的），可是在那白色字體，纔是顯示出來咱們會看到的東西。