常用6種type的form表單的input標簽分析及示例


<input> 標簽用於搜集用戶信息。

根據不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

在這里博主介紹6中type的input,分別是文本域、密碼字段、單選按鈕、復選按鈕、提交按鈕以及指定圖片按鈕

1:文本域 

文本域通過<input type="text"> 標簽來設定,當用戶要在表單中鍵入字母、數字等內容時,就會用到文本域。

First name: <input type="text" name="firstname">

瀏覽器下效果展示

2:密碼字段 

密碼字段通過標簽<input type="password"> 來定義

Password: <input type="password" name="pwd">

瀏覽器下效果展示

注意:密碼字段字符不會明文顯示,而是以星號或圓點替代。

3:單選按鈕

<input type="radio"> 標簽定義了表單單選框選項

<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female

瀏覽器顯示效果如下:

4:復選按鈕

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 

瀏覽器顯示效果如下:

5:提交按鈕

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時,表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

Username: <input type="text" name="user">
<input type="submit" value="Submit">

瀏覽器顯示效果如下:

6:指定圖片按鈕

<input type="image"> 定義了指定圖片按鈕,src后面跟上指定的圖片地址或者路徑,alt屬性為圖像提供alt文本,因此屏幕閱讀器用戶可以更好地了解按鈕的用途。

<input type="image" id="image" alt="Login"
           src="/media/examples/login-button.png" />

瀏覽器顯示效果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM