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表單設計