關於HTML Input，HTMLInput

關於HTML Input，HTMLInput

定義：<input> 標籤用於搜集使用者資訊。Input表示Form表單中的一種輸入對象。

根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框（單/複選框）、掩碼後的文本控制項、選項按鈕、（提交/重設）按鈕等等。

執行個體：

<form action="form_action.asp" method="get">  <p>First name: <input type="text" name="fname" /></p>  <p>Last name: <input type="text" name="lname" /></p>  <input type="submit" value="Submit" /></form>

文法：<input type="value">；

屬性值：

value	描述
button	定義可點擊按鈕（多數情況下，用於通過 JavaScript 啟動指令碼）。
checkbox	定義複選框。
file	定義輸入欄位和 "瀏覽"按鈕，供檔案上傳
hidden	定義隱藏的輸入欄位。
image	定義映像形式的提交按鈕。
password	定義密碼欄位。該欄位中的字元被掩碼。
radio	定義選項按鈕。
reset	定義重設按鈕。重設按鈕會清除表單中的所有資料。
submit	定義提交按鈕。提交按鈕會把表單資料發送到伺服器。
text	定義單行的輸入欄位，使用者可在其中輸入文本。預設寬度為 20 個字元。

 

 

 

 

 

 

 

 

 

 

 

 

 

具體介紹如下

• <input type="value" />;

定義可點擊的按鈕(標準的windows風格的按鈕)，但沒有任何行為。button 類型常用於在使用者點擊按鈕時啟動 JavaScript 程式。因此，要讓按鈕跳轉到某個頁面上還需要加入寫JavaScript代碼。

<form name="FormButton">  <input type="button" name="隨便填" value="點擊按鈕" onclick="window.open('http://www.cnblogs.com/Loonger/')"> </form>  

效果：

<input type="checkbox" />;

定義複選框。複選框允許使用者在一定數目的選擇中選取一個或多個選項。多選框，常見於註冊時選擇愛好、性格、等資訊。參數有name,value及特別參數checked（表示預設選擇）其實最重要的還是value值，提交到處理頁的也就是value。（附：name值可以不一樣，但不推薦。）

<form name="FormCheckbox">   <input type="checkbox" name="animal" value="dog" checked>This is a dog<br />   <input type="checkbox" name="animal" value="cat">This is a cat<br />   <input type="checkbox" name="animal" value="horse">This is a horse<br /> </form> /*name值可以不一樣，但不推薦*/<form name="FormCheckbox">   <input type="checkbox" name="animal" value="dog" checked>This is a dog<br />   <input type="checkbox" name="animal" value="cat">This is a cat<br />   <input type="checkbox" name="animal" value="horse">This is a horse<br /> </form>

效果：  

<input type="file" />;

用於檔案上傳。該控制項帶有一個文字框和一個瀏覽按鈕.當你在BBS、EMAIL中上傳附件時一定少不了的控制項。

<form>  <input type="file" name="pic" accept="image/gif" /></form>

效果：

<input type="hidden" />;

定義隱藏欄位。隱藏欄位對於使用者是不可見的（如果一個非常重要的資訊需要被提交到下一頁，但又不能或者無法明示。 一句話，你在頁面中是看不到hidden在哪裡。最有用的是hidden的值。）隱藏欄位通常會儲存一個預設值，它們的值也可以由 JavaScript 進行修改。

<form name="FormHidden"> your hidden info here:   <input type="hidden" name="hiddeninfo" value="Loong's Blog"> </form> <script>   alert("隱藏欄位的值是 "+document.FormHidden.hiddeninfo.value) </script> 

效果：

<input type="image" />;

定義映像形式的提交按鈕。

<form>   <input type="image" src="submit.gif" alt="Submit" /></form> 

• <input type="password" />;

定義密碼欄位。密碼欄位中的字元會被掩碼（顯示為星號或原點）。

<form>  Email:<input type="text" name="email" /><br />  Password: <input type="password" name="pwd" maxlength="8" /><br /></form>

效果：

<input type="radio" />;

定義選項按鈕，出現在多選一的頁面設定中。參數同樣有name,value及特別參數checked. 不同於checkbox的是，name值一定要相同，否則就不能多選一。當然提交到處理頁的也還是value值。

<form action="/example/html/form_action.asp" method="get">  <input type="radio" name="sex" value="male" /> Male<br />  <input type="radio" name="sex" value="female" /> Female<br /></form>

/*下面是name值不同的一個例子，就不能實現多選一的效果了*/ <form>   <input type="radio" name="checkit1" value="a" checked><br>  <input type="radio" name="checkit2" value="b"><br>  <input type="radio" name="checkit3" value="c"><br> </form> 

效果：

<input type="submit" />;

         <input type="reset" />;

定義“提交”和“重設”兩按鈕，提交按鈕用於向伺服器發送表單資料。資料會發送到表單的 action 屬性中指定的頁面。重設按鈕則起個快速清空所有填寫內容的功能。

<form>  Email: <input type="text" name="email" /><br />  Password: <input type="text" name="pin" maxlength="4" /><br />  <input type="reset" value="Reset" />  <input type="submit" value="Submit" /></form>

效果：

<input type="submit" />;

輸入類型是text，這是我們見的最多也是使用最多的，比如登陸輸入使用者名稱，註冊輸入電話號碼，電子郵件，家庭住址等等。當然這也是Input的預設類型。 
參數name：同樣是表示的該文本輸入框名稱。 
參數size：輸入框的長度大小。 
參數maxlength：輸入框中允許輸入字元的最大數。 
參數value：輸入框中的預設值 
特殊參數readonly：表示該框中只能顯示，不能添加修改

<form action="/example/html/form_action.asp" method="get">  <p>Email: <input type="text" name="email" /></p>  <p>Password: <input type="text" name="pin" maxlength="18" /></p>  </form>

效果：見password部分。