1.4 常用HTML標籤3:表單

尹成發表於2018-11-09

html表單 
表單用於蒐集不同型別的使用者輸入,表單由不同型別的標籤組成,實現一個特定功能的表單區域(比如:註冊),首先應該用<form>標籤來定義表單區域整體,在此標籤中再使用不同的表單控制元件來實現不同型別的資訊輸入,具體實現及註釋可參照以下虛擬碼:

<!-- form定義一個表單區域,action屬性定義表單資料提交的地址,method屬性定義提交的方式。   -->
<form action="http://www..." method="get">

<!-- label標籤定義表單控制元件的文字標註,input型別為text定義了一個單行文字輸入框  -->
<p>
<label>姓名:</label><input type="text" name="username" />
</p>
<!-- input型別為password定義了一個密碼輸入框  -->
<p>
<label>密碼:</label><input type="password" name="password" />
</p>
<!-- input型別為radio定義了單選框  -->
<p>
<label>性別:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<!-- input型別為checkbox定義了單選框  -->
<p>
<label>愛好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<!-- input型別為file定義上傳照片或檔案等資源  -->
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<!-- textarea定義多行文字輸入  -->
<p>
<label>個人描述:</label>
<textarea name="about"></textarea>
</p>
<!-- select定義下拉選單選擇  -->
<p>
<label>籍貫:</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>
<!-- input型別為submit定義提交按鈕,還可以用圖片控制元件代替submit按鈕提交,一般會導致提交兩次,不建議使用。如:
     <input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">
<!-- input型別為reset定義重置按鈕  -->
<input type="reset" name="" value="重置">
</p>
</form>

 

相關文章