HTML5表單_form

原則：能讓用戶選擇的決不填寫，增加用戶體驗

表單（form）元素格式

<input type="text" name="fname" value="text"/> input元素類型 input元素名稱 input元素的值

 

表單語法

屬性	說明
type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默認值為text
name	指定表單元素的名稱
value	元素的初始值。type為radio時必須指定一個值
size	指定表單元素的初始寬度。當type為text或password時，表單元素的大小以字符為單位。對於其他類型，寬度以像素為單位
maxlength	type為text或password時，輸入的最大字符數
checked	type為radio或checkbox時，指定按鈕是否是被選中

 

 

 

 

 

 

 

 

 

 

 2.表單(form)

<form method=”post” action=”#”>
<p><input name=”” type=”” value=””></p>
</form>

3.文本框填寫text

 <input type=”text”>

用戶名：<input type="text" name="username" size="15"/>

效果圖：

4.單選列表

<input type=”radio”>

<p><input type="radio" name="xuan">自動登錄 <input type="radio" name="xuan">SSL </p>

 效果圖：

5.多選列表

<input type=”checkbox”>

<p> 愛好1：<input type="checkbox" name="sport" checked/>運動 
　　　　　　<input type="checkbox" name="book" checked/>看書 　　　<input type="checkbox" name="sleep" checked/>睡覺 </p>

效果圖：

6.下拉列表

<select name=”” size=””>
<option name=””></option>
<option name=””></option>
</select>

<p> 愛好2： <select name="intrest" multiple>
        <option value="sport">運動動</option>
        <option value="game">游戲戲</option>
        <option value="sleep">睡覺覺</option>
        <option value="eat">吃飯飯</option>
    </select>
</p>

效果圖：

<p>
    生日：<select name="year">
    <option name="1991" selected>1991</option>
    <option name="1991">1992</option>
    <option name="1991">1993</option>
         </select>年  7     <select name="mouth">
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3" selected>11</option>
    </select>月 12     <select name="day">
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3" selected>30</option>
    </select>日 17 </p>

 效果圖：

7.多行文本輸入

<form method=”post” action=”#” enctype=”multipart/form-data”>
<textarea name=”” rows=”” cols=””/>
</form>

<p> 簡歷： <textarea name="introduce" cols="20" rows="10">個人簡歷</textarea>
</p>

效果圖：

8.文件域

 <input type=”file” name=””/> 

<p> 文件上傳： <input type="file" name="file"/>
</p>

效果圖：

9.郵箱輸入

 <input type=”email”> 

<p> 電子郵箱：<input type="email" name="email"/>
</p>

 效果圖：

10.網址輸入

 <input type=”url”> 

 

11.數字輸入

 <input type=”number”> 

<p> 月薪：<input type="number" name="money"/>
</p>

效果圖：

12.滑塊

 <input type=”range” min=”” max=”” step=””/> 

 

13.搜索

 <input type=”search”/> 

 

14.按鈕框

<input type=”submit” value=”提交”/>
<input type=”reset” value=”重置”/>
<input type=”button” value=”按鈕”/>
<input type=”image” src=”path”/>

 

15.隱藏域

 <input type=”hidden” value=”” name=””> 

 

16.只讀框體

 <readonly> 

<p> 電子郵箱：<input type="email" name="email" value="[e-mail]" readonly maxlength="50"/>
</p>

 效果圖：

17.禁用按鈕

 <disable>

<p> 我現在：<select name="check" disabled>
    <option name="0">請選擇身份</option>
    <option name="1">醫生</option>
    <option name="2">老師</option>
</select>（非常重要） </p>

效果圖：

 

18.框體內提示文字

<palceholder=”空間內提示文字”>

• input類型的文本框提供一種提示（hint）
• 可以描述文本框期待用戶輸入何種內容
• 提示語默認顯示，當文本框中輸入內容時提示語消失
• 適合於input標簽：text、search、url、email、和password等類型

<p> 姓名：<input type="text" name="uname" placeholder="輸入必須是2-6個字符"/>
</p>

 效果圖：

 

19.控件必填

<required>

<p> 姓名：<input type="text" name="uname" required placeholder="輸入必須是2-6個字符"/>
</p>

效果圖：

20.按某種規則填寫

<pattern=”正則表達式”>

<p>密碼： <input type="password" name="pass" required pattern="[\dA-Za-z]{6,16}">長度為6-16個字符 </p> 

效果圖：

21.自動聚焦

<autofocus>