form表單中input輸入框的用法總結

1.　　<input type="text">   type類型為text，定義一個可以輸入內容文本輸入框

　　

2.　　<input type="submit" value="提交">  type類型為text，定義一個按鈕，點擊會提交到form表單地址中

　　

　　另外：<button>提交</button>    按鈕的標簽button，也具有和<input type="submit" value="提交">同樣的作用

　　

 

 

3.　　<input type="button" value="提交">   type為button，定義一個按鈕，但是能點擊不能提交表單

　　

4.　　<input type="checkbox" > type為checkbox，定義一個復選框，點擊勾選

　　

5.　　<input type="radio" name="sex" value="男">   type為radio，定義一個單選框，點擊選中

　

6.　　<input type="file">     選擇文件上傳

 　　

7.　　<input type="email">  定義一個郵箱文本框，輸入不是郵箱時，無法提交，並自動給予提示

8.　　type類型為  url   ，定義一個網址輸入框，輸入不是網址，則會提示

<form action="" method="GET">
        <input type="url">
        <input type="submit" value="提交">
</form>

 

9.　　type類型為  search  ，仍是文本框，只是在chrome下輸入文字后多了個×，能直接刪除文本框中的文字

<form action="" method="GET">
        <input type="search">
        <input type="submit" value="提交">
</form>

10.　　type類型為 range  ，特定范圍內的數值選擇器，類似於進度條或拖拽條，有min（最小值），max（最大值），step（步數），以及value（當點步數）

<form action="" method="GET">
        <input type="range" step="2" min="0" max="10"  value="2"/>
        <input type="submit" value="提交">
</form>

 

11.type類型為number,一個只能輸入數字的文本框

<form action="" method="GET">
        <input type="number"/>
        <input type="submit" value="提交">
</form>

 

12.type類型為color，顏色選擇器

<form action="" method="GET">
        <input type="color"/>
        <input type="submit" value="提交">
</form>

 

13.　　type類型為data，選擇日期

<form action="" method="GET">
        <input type="date"/>
        <input type="submit" value="提交">
</form>

14.　　type類型為time，選擇時間，不含時區

<form action="" method="GET">
        <input type="time"/>
        <input type="submit" value="提交">
</form>

15.　　input內的一些屬性：

　　placeholder  文本框提示信息 　　

<form action="" method="GET">
        <input type="text" placeholder="輸入4~16個字符"/>
        <input type="submit" value="提交">
</form>

　　autocomplete  是否保存用戶輸入值，值為on(默認)或off，on是保存，off是不保存

 

<form action="" method="GET">
        <input type="text" autocomplete="off"/>
        <input type="submit" value="提交">
</form>

　　autofocus  獲取文本框焦點，當文本框有這個屬性時，打開網頁自動獲取這個文本框的焦點

<form action="" method="GET">
        <input type="text">
        <input type="text" autofocus>
        <input type="submit" value="提交">
</form>

required  填寫這個屬性使文本框為必填內容，否則無法提交

<form action="" method="GET">
        <input type="text">
        <input type="text" required>
        <input type="submit" value="提交">
</form>

 

pattern   正則驗證，使輸入內容必須符合正則要求才能提交

<form action="" method="GET">
        <input type="text">
        <input type="text" pattern="/d{1,5}">
        <input type="submit" value="提交">
</form>