html 標籤類型屬性type(file、text、radio、hidden等)詳細介紹

html <input>標籤類型屬性type(file、text、radio、hidden等)詳細介紹

轉載請註明：文章轉載自:[169IT-最新最全的IT資訊]

html <input>標籤類型屬性type(file、text、radio、hidden等)簡介

    html <input>標籤蒐集用戶信息,是 html Form表單中的一種輸入對象。根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

html <input>標籤類型屬性type定義和用法

type 屬性規定要顯示的 <input> 元素的類型。默認類型是：text。該屬性不是必需的，可是咱們認爲您應該始終使用它。

html <input>標籤類型屬性type詳解

html input標籤type屬性值(包括html 5新增的type值)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

值         描述 button     定義可點擊的按鈕（大多與 JavaScript 使用來啓動腳本） checkbox   定義複選框。 color      定義拾色器。 date      定義日期字段（帶有 calendar 控件） datetime   定義日期字段（帶有 calendar 和 time 控件） datetime-local  定義日期字段（帶有 calendar 和 time 控件） month     定義日期字段的月（帶有 calendar 控件） week        定義日期字段的周（帶有 calendar 控件） time       定義日期字段的時、分、秒（帶有 time 控件） email      定義用於 e-mail 地址的文本字段 file       定義輸入字段和 "瀏覽..." 按鈕，供文件上傳 hidden    定義隱藏輸入字段 image   定義圖像做爲提交按鈕 number   定義帶有 spinner 控件的數字字段 password   定義密碼字段。字段中的字符會被遮蔽。 radio   定義單選按鈕。 range   定義帶有 slider 控件的數字字段。 reset   定義重置按鈕。重置按鈕會將全部表單字段重置爲初始值。 search  定義用於搜索的文本字段。 submit  定義提交按鈕。提交按鈕向服務器發送數據。 tel    定義用於電話號碼的文本字段。 text   默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符。 url    定義用於 URL 的文本字段。

如下 input 類型是 HTML5 中的新類型：

color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

html 經常使用input type值介紹 

1，input標籤屬性type值爲text舉例說明

輸入類型是text，這是使用最多的input類型，好比登錄輸入用戶名，註冊輸入電話號碼，電子郵件，家庭住址等等。這也是Input的默認類型。 

參數name：一樣是表示的該文本輸入框名稱。 

參數size：輸入框的長度大小。 

參數maxlength：輸入框中容許輸入字符的最大數。 

參數value：輸入框中的默認值 

特殊參數readonly：表示該框中只能顯示，不能添加修改。 

input標籤屬性type值爲text代碼實例

1 2 3 4 5

< form >  your name:  < input  type = "text"  name = "yourname"  size = "30"  maxlength = "20"  value = "輸入框的長度爲30，容許最大字符數爲20" >< br >  < input  type = "text"  name = "yourname"  size = "30"  maxlength = "20"  readonly  value = "你只能讀不能修改" >  </ form >

2，input標籤屬性type值爲password 舉例說明

不用我說，一看就明白的密碼輸入框，最大的區別就是當在此輸入框輸入信息時顯示爲保密字符。

參數和「type=text」相相似。

input標籤屬性type值爲password代碼舉例

1 2 3 4

< form >  your password:  < input  type = "password"  name = "yourpwd"  size = "20"  maxlength = "15"  value = "123456" >密碼長度小於15  </ form >

3，input標籤屬性type值爲file舉例說明

當你在論壇上傳圖片，在EMAIL中上傳附件時就使用當前屬性，input type爲file時提供了一個文件上傳的平臺，參數有name，size。

 

input標籤屬性type值爲file的html代碼以下:

1 2 3 4

< form >  your file:  < input  type = "file"  name = "yourfile"  size = "30" >  </ form >

4，input標籤屬性type值爲hidden詳細介紹及舉例

input標籤type值爲hidden時，一般稱爲隱藏域，若是一個很是重要的信息須要被提交到下一頁，但又不能或者沒法明示的時候，可使用hidden。

input標籤屬性type值爲hidden示例代碼:

1 2 3 4 5 6 7

<form name="form1">  your hidden info here:  <input type="hidden" name="yourhiddeninfo" value="cnbruce.com">  </form>  <script>  alert("隱藏域的值是 "+document.form1.yourhiddeninfo.value)  </script>

5，input標籤屬性type值爲button詳細介紹及舉例

標準的一windows風格的按鈕，固然要讓按鈕跳轉到某個頁面上還須要加入寫JavaScript代碼

 input標籤屬性type值爲button示例代碼:

1 2 3 4

< form  name = "form1" >  your button:  < input  type = "button"  name = "yourhiddeninfo"  value = "打開www.169it.com"  onclick = "window.open('http://www.169it.com')" >  </ form >

6，input標籤屬性type值爲checkbox詳細介紹及舉例

多選框，常見於註冊時選擇愛好、性格、等信息。參數有name,value及特別參數checked（表示默認選擇） 

其實最重要的仍是value值，提交處處理頁的也就是value。（附：name值能夠不同，但不推薦。） 

input標籤屬性type值爲checkbox示例代碼:

1 2 3 4 5

< form  name = "form1" >  a:< input  type = "checkbox"  name = "checkit"  value = "a"  checked>< br >  b:< input  type = "checkbox"  name = "checkit"  value = "b" >< br >  c:< input  type = "checkbox"  name = "checkit"  value = "c" >< br >  </ form >

name值能夠不同，但不推薦<br> 

1 2 3 4 5

< form  name = "form1" >  a:< input  type = "checkbox"  name = "checkit1"  value = "a"  checked>< br >  b:< input  type = "checkbox"  name = "checkit2"  value = "b" >< br >  c:< input  type = "checkbox"  name = "checkit3"  value = "c" >< br >  </ form >

7，input標籤屬性type值爲radio詳細介紹及舉例

即單選框，出如今多選一的頁面設定中。參數一樣有name,value及特別參數checked. 

不一樣於checkbox的是，name值必定要相同，不然就不能多選一。固然提交處處理頁的也仍是value值。

 

input標籤屬性type值爲radio示例代碼:

1 2 3 4 5

< form  name = "form1" >  a:< input  type = "radio"  name = "checkit"  value = "a"  checked>< br >  b:< input  type = "radio"  name = "checkit"  value = "b" >< br >  c:< input  type = "radio"  name = "checkit"  value = "c" >< br >  </ form >

下面是name值不一樣的一個例子，就不能實現多選一的效果了<br> 

1 2 3 4 5

< form  name = "form1" >  a:< input  type = "radio"  name = "checkit1"  value = "a"  checked>< br >  b:< input  type = "radio"  name = "checkit2"  value = "b" >< br >  c:< input  type = "radio"  name = "checkit3"  value = "c" >< br >  </ form >

8，input標籤屬性type值爲image 詳細介紹及舉例

比較另類的一個input type，能夠做爲提交式圖片。

input標籤屬性type值爲image示例代碼: 

1 2 3 4

< form  name = "form1"  action = "http://www.169it.com/test.php" >  your Imgsubmit:  < input  type = "image"  src = "../blog/images/face4.gif" >  </ form >

9，input標籤屬性type值爲submit和reset詳細介紹及舉例

分別是「提交」和「重置」兩按鈕 

submit主要功能是將Form中全部內容進行提交action頁處理，reset則起個快速清空全部填寫內容的功能。

input標籤屬性type值爲submit和reset代碼舉例:

1 2 3 4 5

< form  name = "form1"  action = "xxx.asp" >  < input  type = "text"  name = "yourname" >  < input  type = "submit"  value = "提交" >  < input  type = "reset"  value = "重置" >  </ form >