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 >