表單標記
<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容。
基本格式
<form action=”服務器端地址（接受表單內容的地址）” name=”表單單名稱” method=”post|get”>…</form>
屬性
name
表單名稱
method
- get方式：會將表單的內容附加在URL地址的後面，所以限制了提交的內容的長度，不超過8192個字符，且不具備保密性
- post方式：將表單中的數據一併包含在表單主題中，一起傳送到服務器中處理，沒有數據大小限制。
action
表單數據的處理程序URL地址，如果爲空則使用當前文檔的URL地址，如果變淡中不需要使用action屬性也要指定其屬性爲”no”
enctype
設置變淡的資料的編碼方式
target
和超鏈接的屬於類似，用於指定目標窗口
<input>標記
type屬性
- text：當type=”text”時，<input>表示一個文本的輸入域
- password:當type=”password”時,<input>表示一個密碼的輸入域
代碼
<body>
<form>
姓名：<input type="text" name="name"><br/>
密碼：<input type="password" name="password">
</form>
</body>顯示結果
name屬性
定義控件的名稱
value屬性
初始化值，打開瀏覽器時，文本框中的內容
代碼
<body>
<form>
姓名：<input type="text" name="name" value="這是默認的值"><br/>
密碼：<input type="password" name="password">
</form>
</body>顯示結果
size屬性
設置控件的長度
代碼
<body>
<form>
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5">
</form>
</body>顯示結果
maxlenght屬性
輸入框中最大允許輸入的字符數
提交 重置 普通按鈕
- 當<input type=”submit”>時，爲提交按鈕
- 當<input type=”reset”>時，爲重置按鈕
- 當<input type=”button”>時，爲普通按鈕
代碼
<body>
<form>
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>點擊提交默認提交到當前頁面
設置action
代碼
<body>
<form action="demo2.html">
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>點擊提交顯示結果，提交到action地址
設置post提交
代碼
<body>
<form method="post">
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>點擊提交後地址欄不會有參數暴露
單選框和複選框
單選按鈕
當<input type=”radio”>時，爲單選按鈕
代碼
name設置一樣可單選 checked爲默認選擇項
<body>
<form method="post">
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
性別<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>顯示結果
複選框
當<input type=”checkbox”>時，爲複選框
代碼
<body>
<form method="post">
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
性別<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
愛好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 籃球
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>顯示結果
注意
單選框和複選框都可以使用”cheked”屬性來設置默認選中項
隱藏域
當<input type=”hidden”>時，爲隱藏表單域
代碼
<body>
<form >
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
性別<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
愛好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 籃球
<input type="hidden" value="隱藏的內容" name="hide" size=10>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>顯示結果，界面中不會顯示隱藏的內容，單機提交會進行提交
多行文本域
用法
使用<textarea>標記可以實現一個，能夠輸入多行文本的區域
語法格式
<textarea name=”name” rows=”value” cols=”value” value=”value” >……</textarea>
rows屬性和cosl屬性分別用來指定，顯示的行數和獵術，單位是個數
代碼
<body>
<form >
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
性別<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
愛好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 籃球
<input type="hidden" value="隱藏的內容" name="hide" size=10><br/>
自我介紹<br/>
<textarea cols="35" rows="10" name="me">
</textarea><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>顯示結果
菜單下拉列表域
語法格式
<select name="" size="value" multiple
<option value="value" selected>選項1</option>
<option value="value" >選項2</option>
<option value="value" >選項3</option>
......
</select>
option標記
<option>用來指定列表中的一個選項，需要放在<select></select>之間
- value：給選項賦值，指定傳送到服務器上面的值
- selected：指定默認的選項
代碼
<body>
<form >
姓名：<input type="text" name="name" value="這是默認的值" size="10"><br/>
密碼：<input type="password" name="password" size="5"><br/>
性別<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
愛好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 籃球
<input type="hidden" value="隱藏的內容" name="hide" size=10><br/>
自我介紹<br/>
<textarea cols="35" rows="10" name="me">
</textarea><br/>
地址：<br/>
<select name="address">
<option>上海</option>
<option>北京</option>
</select><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
</form>
</body>顯示結果
