HTML之表单元素.

Presentation on theme: "HTML之表单元素."— Presentation transcript:

1 HTML之表单元素

2 三个重要的属性说明 1、action指定该表单发送时接受操作的地址 2、method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送。post则是在HTTP请求中发送。 3、enctype指定表单数据在发送的服务器之前如何编码，特别注意的是，当含有上传域时要设置编码方式为enctype="multipart/form-data"，否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，form里面的input的值以2进制的方式传过去。才能完整的传递文件数据。FTP上传大文件的时候，也有个选项是以二进制方式上传。

3 enctype的三个选项 application/x-www-form-urlencoded : 在发送前编码所有字符（默认） multipart/form-data : 不对字符编码。以二进制的方式发送数据，当表单含有上传域时，必须使用后台才能获取上传的文件。 text/plain : 空格转换为 "+" 加号，但不对特殊字符编码。

4

5 一、文本域 <input type="text" name="text" value="" /> 二、密码域 密码跟文本框类似，但是在里面输入的内容显示为圆点。 <input type="password" name="text" value="" />

6 三、单选按钮 男人:<input type="radio" name="sex" value="male" /> Male <br /> 女人：<input type="radio" name="sex" value="female" /> Female 四、复选框 <input type="checkbox" name="check1" value="" /> 五、按钮 <input type="button" value="确认" />

7 六、重置按钮 当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。 <input type="reset" value="重置" /> 七、提交按钮 当点击提交按钮时，浏览器将自动提交表单。 <input type="submit" value="提交" /> 八、隐藏域 隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在。 <input type="hidden" value="我是一个隐藏域" />

8 九、上传域 <input type="file" value="" /> 十、图片按钮 <input type="image" src="123.gif" /> 十一、下拉列表 <select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select>

9 十二、label label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如，当将单选按钮放在label内。则点击label内的文字也会触发单选按钮，而不必只是点中小圆点。 <p><label><input type="radio" name="male" />男人</label></p> <p><label><input type="radio" name="male" />女人</label></p>

10 十三、disabled与readonly 禁用和只读属性。readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。 可以在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。 <form id="form1" action="/home/index" method="post"> 禁用文本框：<input type="text" disabled="disabled" /> 只读文本框: <input type="text" readonly="readonly" /> </form>

11 十四、TextArea <form id="form1" action="/home/index" method="post"> <textarea cols="10" rows="10">我是一个兵，来自老百姓。</textarea> </form>

12 十五、fieldset　　定义域　　 fieldset用于给表单元素分组，legend用于设置分组标题 <fieldset> <legend>你的信息？</legend> 身高: <input type="text" value="180" /> 体重: <input type="text" value="200" /> </fieldset>

13 简单的例子： <form id="form1" action="/home/index" method="post">
<input type="hidden" value="隐藏信息" /> 账号: <input type="text" maxlength="8" /><br/> 密码：<input type="password" /><br/> 姓名：<input type="text" name="Name" /><br/> 性别: <input type="radio" name="male" />男人 <input type="radio" name="male" />女人<br/> 是否单身: <input type="checkbox" name="single" /> <br/> 年龄：<select name="age"> <option value="0">0-30</option> <option value="1">31-60</option> <option value="2">60-100</option> </select><br/> 喜欢的花:<select multiple="multiple" name="flower"> <option value="0">玫瑰花</option> <option value="1">百合花</option> <option value="2">仙人掌</option> <option value="3">郁金香</option> <option value="4">万寿菊</option> </select> <br/> 上传照片：<input type="file" /> <br/> <input type="image" src="brt_btn.png" /> <br/> <input type="button" value="确认" />  <input type="submit" value="提交" />   <input type="reset" value="重置" /><br/></form>

14 简单的例子：

15 Dreamweaver中的表单 表單包含了網頁中不同種類的資料元件，通常用來讓使用者輸入資訊，並可傳遞這些資料到別的網頁或自身網頁做後續處理。Dreamweaver 的表單工具列提供了許多構成表單的工具，包含文字欄位、核取方塊…等。 這是這一節要做出來的表單成品，練習時請依照這個表單成品依序在表單工具列內找按鈕加入表單元件。 每一項目完成後，請按 Shift + Enter 鍵產生 <br> 跳行標籤；若行距需要大一點則按 Enter 鍵，它會產生 <p> 段落標籤。

16 Dreamweaver中的表单 表單工具列上的表單工具很多，在此僅介紹本書會用到的工具。 表單：
建立表單的範圍，只有放在表單內的元件內容才會送出，所以通常會先將表單範圍畫出來，再加入其它表單內的元件。 文字欄位： 讓使用者輸入文字資料的欄位，譬如：姓名、身份證字號等。 隱藏欄位： 不會顯示在網頁上的資料欄位，通常用來儲存不需讓使用者看到的內容，像是存放運算結果的變數、使用者登入時間…等。 表單工具列

17 Dreamweaver中的表单 文字區域： 讓使用者輸入多行文字的資料欄位，通常是使用者會輸入較多文字的區塊，包括留言、自傳…等文字資料。
核取方塊： 讓使用者勾選，有已核取（checked）和不核取 （unchecked）的狀態。 在設計時可以視需要將剛開始的狀態設為已核取。

18 Dreamweaver中的表单 選項按鈕群組：
選項按鈕（Radio Button）群組是一組的選項按鈕，彼此是有關聯的，同時間只會有一個選項按鈕被按下，也就是彼此是互斥的。 將標籤改為 “男”和“女”做為標籤文字，值則分別改為 “male” 和 “female”。顯示方式有兩種：選擇斷行符號（<br>標籤） 和表格，它的結果分別如下： 選擇段行符號（<br>標籤） 選擇表格

19 Dreamweaver中的表单 表單/清單： 列出事先定義好的清單選項讓使用者挑選，省去使用者自行鍵入的時間，可視需要設為可複選
在清單項目加入標籤文字和對應的值 網頁上顯示的結果

20 Dreamweaver中的表单 按鈕： 送出表單內的資料，有「重設」和「送出」兩種執行命令。「重設」是將表單內的資料全部清除，而「送出」則是執行將表單內容送出的動作。

21 Dreamweaver中的表单 Spry 驗證文字欄位：
和文字欄位一樣是輸入單一文字欄位，但它內含幾種驗證不同性質資料的格式檢查。例如：「電子郵件位址」要含有 位址」內要有四個數字並用小數點隔開…等基本格式檢查。這個驗證功能可以幫助設計者不用另外寫程式碼做輸入資料格式錯誤的檢查。 Spry 驗證文字欄位的使用，必須按下文字欄位上方藍色的Spry 文字欄位區塊，「屬性」面版才會顯示它的設定欄位。 欄位的類型設為「電子郵件地址」，預覽狀態會變為「格式無效」，這是當使用者輸入錯誤的電子郵件地址格式時會顯示的錯誤訊息；至於“驗證於”選項若選「onBlur」，則表示當使用者將 focus 離開這個欄位的時候會做格式檢查。 按下文字欄位上方的 Spry 文字欄位區塊

22 Dreamweaver中的表单 若在瀏覽網頁時,輸入的格式錯誤，會顯示錯誤訊息如下圖： 錯誤訊息

23 Dreamweaver中的表单 最後，瀏覽這個表單的網頁結果如下:

24 课堂练习