在 < input > 標簽里面 比較常用的type屬性 以及用法

        關於<input>標簽

 

      <input>標簽在HTML代碼里面本身是空的，也就是說單獨調用<input>標簽是沒有任何作用的，而<input>標簽常用的屬性就是type，而type這個屬性也擁有着很多屬性，這篇文章主要是介紹一下type屬性常用的一些屬性 。

 

常用的type屬性

純文本內容   <input type="text" >
密碼純文本內容   <input type="password">
提交按鈕   <input type="submit">
單選框      <input type="radio">
多選框      <input type="checkbox">

 

比較常用的也就是上面這幾種type屬性。

 

text 和 password  的區別

      text 和 password  實際上是一模一樣的，他們全部是代表純文本內容屬性，text 屬性並不會對輸入框內的文本內容進行隱藏，而 password 屬性卻會對輸入框內的文本內容進行隱藏保護，password 屬性一般用於密碼輸入框。

        submit 屬性的作用

 

   submit 屬性的作用就是把它所在的表單里面的內容提交給服務器

   在單個表單里面正常情況下只會出現一次 submit屬性。

 

radio 屬性的介紹 以及代碼的寫法

 

     radio 屬性的介紹 

     radio 屬性代表的是單選框，我們在注冊賬號的時候，

     一般的話都有一個選擇性別的選項，而這個選項是單選的，

      這鍾選擇框就是單選框，也就是<input>標簽通過type調用 radio 屬性所達到的效果

 

      效果演示：

 

                       請選擇你的性別：

                  男  女  保密

       

      代碼的寫法：

Markup

<form> 請選擇你的性別<br/> <input type="radio" name="x"">男 <input type="radio" name="x" >女 <input type="radio" name="x">保密 </form>

 

 

checkbox 屬性的介紹 以及代碼的寫法

 

      checkbox 屬性的介紹：

      checkbox 屬性代表的是多選框，在很多網頁里面也是可以看到的，例如選擇興趣愛好，很多人不止一種興趣愛好，而這個時候就會用到checkbox屬性來制作一個多選框，寫法和單選框radio屬性一樣的。

 

       演示效果 ：

 

            你有哪些興趣愛好？

             書法  籃球  足球

 

        代碼的寫法：

Markup

<form> 你有哪些興趣愛好？<br /> <input type="checkbox" name="x">書法 <input type="checkbox" name="x">籃球 <input type="checkbox" name="x">足球 </form>

 

后記

 

     單選框和多選框的前提是他們的選項是在同一個組，我們可以通過 name 屬性來設置一個組。

 

     我上面所說的屬性，全部是表單里面<input>標簽所使用的 type屬性，並不代表在其他標簽里面效果也一樣。https://www.cuteur.cn/post/513.html