input標簽學習

學習視頻
html元素標簽含義之元素周期表
知識文檔

文本框

<form><input type="text"><!--單行文本框--><br><br><!--換行符--><input type="text" value="謝謝瀏覽"><!--占位符--><br><br><input type="text" placeholder=""><!--不占文本框內的--><br><br><input type="text" placeholder=" maxlength" maxlength="8"><!--最大能輸入的字符--><br><br><input type="text" placeholder="謝謝瀏覽"size= "50"><!--拓寬單行文本框--> <br><br><input type="text" value="謝謝瀏覽" readonly><!--只讀--><br><br><input type=" password" placeholder=" 密碼"> </form>

瀏覽器預覽

輸入查看

按鈕

格式:
1.<input type=" button" value=" 按鈕”>
2. 按鈕
3. <input type=" submit" value=" 提交”>
分析:
1.原理來講: button元素和type=" button" 實際應用還是有區別的，button要比input按鈕的功能多, button元素可以當任何按鈕來使用，適用范圍更廣泛一些。
2.Input button和input submit的區別: submit用于提交表單,適用范圍比input button要小一點。
3.Input button通常用于和javascript一起使用并作為綁定事件處理。
4.input submit用于提交表單時,必須聲明form里面的method屬性,最好也添加action屬性。

滑動條

<form><!--數字滑動--><input type= "range" min="-100" max= "500" step= “100" ><!--初始值為100，每次移動只能以100為單位--><input type= "range" min="- 100"max= "500" step= "100" value= "100"> </form>

瀏覽器預覽

即使滑動條移動到中間也是顯示100

注：不同瀏覽器的顯示狀況不一樣，chrome不顯示數值，IE瀏覽器顯示數值

選擇框

<form><input type= "checkbox">程序員中最帥的一個是誰<br><input type= "radio" name="a" checked>是他<input type= "radio" name="a">就是他<input type= "radio" name="a">我們的英雄<br><br>你最喜歡吃的水果是什么?<select><option>蘋果</option><option>香蕉</option><option>西瓜</option></select><input type="text" list="datalist1" ><datalist id="datalist1"><option>蘋果</option><option>香蕉</option><option>西瓜</option></datalist>|--> </form>

代碼解析:
1.checked屬性無屬性值,指網頁進入時默認選中的選項。
2.“是他”，“就是他”，“我們的英雄”三個選項只能選擇其中一個。
3.僅datalist元素在數據中并沒有任何顯示,必須搭配單行文本框使用。并且datalist要設置其id屬性，id屬性就是這個datalist唯一的“身份證”, 在單行文本框里要引用datalist需要使用list屬性,并且屬性值就是datalist 的id值才能完成datalist的使用。
5. select無法獲取用戶輸入的文本,只能從項中選取,而datalist不僅可以從項中選取出自己想要的,還可以自己手動寫進去備選項中沒有的， 這是它們兩個元素的最大區別。
瀏覽器預覽


注：radio不能通過再次選擇解除選擇，而checkbox可以

獲取特殊輸入

<form><input type="email"><input type="tel"><input type= "url"><input type= "date"><!--獲取時間--><input type="color"><!--獲取顏色--><input type="hidden" value=123"><!--隨藏文本框--><input type= "image" src="login2.jpg" width= "80px"><!--圖片按鈕--><input type=" file"| multiple><!--multiple一次選擇多個文件--> </form>

總結

以上是生活随笔為你收集整理的html入门学习（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。