HTML表單設計
一、表單標記
<form>...</form>
<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容
基本格式：
<form action=“服務器端地址（接受表單內容的地址）” name=“表單名稱” method=“post|get”>...</form>
常用屬性：
name 表單名稱
method 傳送數據的方式，分為post和get兩種方式
get方式：get方式提交時，會將表單的內容附加在url地址的後面，所以限制了提交的內容的長度，不超過8192個字符，且不具備保密性
post方式：post方式提交時，將表單中的數據一並包含在表單主體中，一起傳送到服務器中處理，沒有數據大小限制
action 表單數據的處理程序的url地址，如果為空則使用當前文檔的url地址，如果表單中不需要使用action屬性也要指定其屬性為“no”
enctype 設置表單的資料的編碼方式
target 和超鏈接的屬於類似，用來指定目標端口
二、文本域和密碼
<input>標記沒有結束標記
基本語法：
<input type="" name="" value="" size="" maxlength="">
屬性介紹：
type
text 當type=“text”時，<input>表示一個文本輸入域
password 當type=“password”時，<input>表示一個密碼輸入域
name 定義控件的名稱
value 初始化值，打開瀏覽器時，文本框中的內容
size 設置控件的長度
maxlength 輸入框中最大允許輸入的字符數
三、提交、重置、普通按鈕
1.提交按鈕
當<input type="submit">時，為提交按鈕
2.重置按鈕
當<input type="reset">時，為重置按鈕
3.普通按鈕
當<input type="button">時，為普通按鈕
四、單選框和復選框
1.單選按鈕
當<input type="redio">時，為單選按鈕
2.復選框
當<input type="checkbox">時，為復選框
3.註意
單選框和復選框都可以使用“checked”屬性來設置默認選中項
五、隱藏域
當<input type="hidden">時，為隱藏表單域
六、多行文本域
用法：使用<textarea>標記可以實現一個，能夠輸入多行文本的區域
格式：
<textarea name="name" rows="value" cols="value" value="value">... ...</textarea>
rows屬性和cols屬性分別用來指定，顯示的行數和列數，單位是字符個數
七、菜單下拉列表域
語法格式：
<select name="" size="value" multiple>
<option value="value" selected>選項1</option>
<option value="value">選項2</option>
<option value="value">選項3</option>
... ...
</select>
屬性：
multiple 設置可以多選
value 設置傳送的數據
option標記：
<option>標記用來指定列表中的一個選項，需要放在<select></select>之間
selected 指定默認的選項
<html> <head> <title>表單設計</title> <meta charset="utf-8"> </head> <body> <form> 賬號：<input type="text" name="zhanghao" value="" size="10" maxlength="5"> <br> <br> 密碼：<input type="password" value="" name="mima" size="10"> <br> <br> <input type="hidden" value="隱藏的內容" name="mihiddenma" size="10"> 愛好：<input type="checkbox" name="tiyu" checked="checked">體育<input type="checkbox" name="changge">唱歌 <br> <br> 性別：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女 <br> <br> 自我介紹：<br> <textarea cols="35" rows="10" name="ziwojieshao"> 這裏是自我介紹 </textarea> <br> <br> 地址： <select name="dizhi"> <option value="sichuan">四川</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> <br> <br> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="按鈕"> </form> </body> </html>
HTML表單設計