首頁  >  文章  >  web前端  >  HTML如何製作表單

HTML如何製作表單

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-07 16:06:1729038瀏覽

製作表單的方法:首先使用form標籤建立表單,建立表單框架;然後使用input標籤建立文字輸入框和提交按鈕;接著使用select和option標籤建立下拉清單;最後使用textarea標籤建立文本區域即可。

HTML如何製作表單

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

HTML 表單

  • 用於收集不同類型的使用者輸入。
  • 表單是一個包含表單元素的區域
  • 表單元素是允許使用者在表單中輸入內容, 例如:文字域(textarea)、下拉清單、單選框(radio-buttons) 、複選框(checkboxes)等等
  • 表單使用表單標籤來設定

HTML 表單-輸入元素

  • 多數情況下被用到的表單標籤是輸入標籤(input)。
  • 輸入類型是由類型屬性(type)定義的。

文字網域(Text Fields)

<form>
	<h3>用户注册页面</h3>
	用户名:<input name = "username "type = "text"><br />	
</form>

HTML如何製作表單

密碼欄位

<form>
	密码:<input name = "passwd1" type="password"><br />
	确认密码:<input name = "passwd2" type = "password"><br />	
</form>

HTML如何製作表單

單選按鈕(Radio Buttons)

<form>
性别:<input name = "sex" value = "1" type = "radio" >男
     <input name = "sex" value = "0" type = "radio" checked = "checked">女<br />
 </form>

HTML如何製作表單

##複選框( Checkboxes)
<form>
爱好:<input name = "hobby" type = "checkbox" value="吃饭">吃饭
     <input name = "hobby" type = "checkbox" value="睡觉">睡觉
     <input name = "hobby" type = "checkbox" value="打游戏">打游戏<br />
 </form>

HTML如何製作表單

簡單的下拉清單
<form>
出生日期:
			<select name = "year" >	
					<option value="2019">2019</optiom>
					<option value="2018">2018</optiom>
					<option value="2017">2017</optiom>
					<option value="2016">2016</optiom>		
			</select>
			<select name = "month">	
					<option value="1">1</optiom>
					<option value="2">2</optiom>
					<option value="3">3</optiom>
					<option value="4">4</optiom>
					<option value="5">5</optiom>	
					<option value="6">6</optiom>
					<option value="7">7</optiom>
					<option value="8">8</optiom>
					<option value="9">9</optiom>
			</select>
			<select name = "day">	
					<option value="1">1</optiom>
					<option value="2">2</optiom>
					<option value="3">3</optiom>
					<option value="4">4</optiom>	
					<option value="5">5</optiom>	
					<option value="6">6</optiom>
					<option value="7">7</optiom>
					<option value="8">8</optiom>
					<option value="9">9</optiom>
					
			</select>	
 </form>

HTML如何製作表單

#重置
<form>
<input type="reset" value="重置">
 </form>

HTML如何製作表單

提交按鈕(Submit Button)
<input type="submit" value="同意以下服务协议,提交注册信息">

HTML如何製作表單

HTML如何製作表單

HTML如何製作表單

##文字域(Textarea)

<textarea name="wenben"></textarea>

#############完整程式碼######

	
		注册页面
		
	
	
		

用户注册页面

用户名:
密码:
确认密码:
性别:
爱好:吃饭 睡觉 打游戏
出生日期:
<input type="submit" value="同意以下服务协议,提交注册信息">
###實驗結果####### ########【推薦學習:###Html5教學###】###

以上是HTML如何製作表單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn