表單

什麼是HTML表單？

表單form是網頁獲取用戶輸入數據的一種方式，如圖：

表單

表單中通常包括各種輸入框、文本标簽、提交按鈕等。

1、一個簡單的表單

首先要有一個form标簽，其他表單控件放到from标簽中，第一個是label标簽用來描述後面的文本框中需要輸入什麼内容，然後是一個input标簽，type的值是text表示是一個文本框，然後也是一個input标簽，type的值是submit，表示是一個提交按鈕，當然想要真正的提交數據還需要一些額外的屬性。

<form action=""> <label for="">學生姓名</label> <input type="text"> <input type="submit" value="保存"> </form>

2、form标簽不但包含所有的表單控件，還會告訴浏覽器當你提交表單的時候要把表單數據發送到哪裡，以及使用什麼方式發送。

<form action="login.php" method="POST"> </form>

action屬性指定表單數據要發送到哪個服務器腳本上，例如這裡發送到login.php ，method屬性指定服務器發送的方式，有post和get兩種方式，在表單當中常用post。

3、for屬性和id屬性

label标簽for屬性的值應該和input标簽中id屬性的值一緻，這樣這兩個表單控件就會被關聯起來。如下，這裡将label關聯到input上。

<form> <label for="student_name">學生姓名</label> <input type="text" id="student_name"> <input type="submit" value="保存"> </form>

for屬性

當我們點擊文本标簽"學生姓名"時候，文本框會自動獲取輸入光标，等待用戶輸入數據。

4、input标簽的type屬性

type屬性決定input标簽顯示成什麼樣子，type屬性種類很多，如下：

<form> <input type="text"> <input type="checkbox"> <input type="radio"> <input type="file"> <input type="password"> <input type="submit"> <input type="reset"> </form>

5、文本區域

input文本框标簽可以接受少量的單行文本，textarea标簽可以接受用戶輸入的多行文本，如下，和input标簽不同，textarea标簽必須有開始标簽和結束标簽。

<label for="summary">總結</label> <textarea id="summary" cols="30" rows="10"></textarea>

文本區域

6、下拉列表

使用select标簽和option标簽創建下拉列表

<select name="" id=""> <option value="">男</option> <option value="">女</option> </select>

綜合示例：

<h2>學生信息</h2> <form action="success.html"> <label for="student-name">姓名</label> <input type="text" id="student-name" value=""><br> <label for="photos">上傳照片</label> <input type="file" id="photos"><br> <label for="">性别</label> <input type="radio" name="gender" id="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female"><label for="female">女</label><br> <label for="">班級</label> <select name="" id=""> <option value="">一班</option> <option value="" selected>二班</option> <option value="">三班</option> <option value="">四班</option> </select><br> <label for="teacher-comments">老師評語</label> <textarea name="" id="teacher-comments" cols="30" rows="10"></textarea><br> <input type="checkbox" id="pass" checked> <label for="pass">考試通過</label><br> <input type="submit" value="提交"> <input type="reset" value="重新填寫"> </form>

html表單

每天進步一點點，跟着教頭學開發。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部