HTML form表單用于為用戶輸入創建 HTML 表單。收集用戶不同類型的數據。
HTML Form 語法
<form action="目的地址" method="傳送方式"> 表單內容 </form>
HTML 表單是由 <form> 標簽開始,用 </form> 標簽結束,兩個標簽之間就是放置表單元素的地方,form 將用戶填完的資料,發送至 action 所設定的目的地址,例如傳到一個 PHP 頁面,method 是內容傳送的方式,有 get 與post 兩種方式。
- get是用來從服務器上獲得數據,在 URL 中對所有人都是可見的,不能傳輸大量的數據,受限于URL長度。
- 而post是用來向服務器上傳遞數據,數據不會顯示在 URL 中。對內容長度沒有限制。
HTML Form 表單內容范例
<form action="get.php" method="post"> <label for="name">用戶名:</label><input type='text'><br> <label for="password">密碼:</label><input type='password'><br> <input type='submit' value='提交'> </form>
范例在 <form>
與 </form>
標簽之中使用了四個表單元素,分別為文字輸入框<input type='text'>
,密碼輸入框<input type='password'>
,發送表單的按鈕<input type='submit' value='提交'>
,這樣的表單設計完成后,當用戶填寫完數據并提交,系統就會以 get 的方式將資料傳送到 get.php 這個后臺頁面,這裡需要注意的是 method='post' 的 post 必須是小寫,同樣的 get 也要小寫,至于 get.php 的數據處理功能則需要另外寫。
常見表單元素
- 單行文字輸入框 input type= text
<input type="text" name="" value="">
- 密碼輸入框 input type= password
<input type="password" name="" value="">
- 標注標簽 label
<label for=" "> </label>
- 下拉選擇框 select option
<select name=""><option value=""></option></select>
- 單選按鈕 radio buttons
<input type="radio" name="" value="">
- 多選框 checkbox
<input type="checkbox" name="" value="">
- 多行文字輸入框 textarea
<textarea name=""></textarea>
- 隱藏元素 input hidden
<input type="hidden" name="" value="">
- 按鈕 button
<input type="button" name="">
- 提交表單按鈕 submit
<input type="submit" name="" value="提交">
- 重置按鈕 reset
<input type="reset" name="" value="重置">
常用元素屬性:
type:輸入的類型
name:表單的名稱
value:表單的內容
這些表單的元素可以自由搭配成為一個完整的表單,每個元素都有他獨特的屬性以及語法規則。