當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

HTML如何制作表单(Axure如何制作点击弹框效果)

發(fā)布時間：2023/12/15 综合教程 24 生活家

生活随笔收集整理的這篇文章主要介紹了 HTML如何制作表单(Axure如何制作点击弹框效果) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

HTML 表單

用于收集不同類型的用戶輸入。
表單是一個包含表單元素的區(qū)域
表單元素是允許用戶在表單中輸入內(nèi)容, 比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等
表單使用表單標(biāo)簽來設(shè)置

HTML 表單-輸入元素

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（input）。
輸入類型是由類型屬性（type）定義的。

文本域（Text Fields）


<form>
	<h3>用戶注冊頁面</h3>
	用戶名:<input name = "username "type = "text"><br />	
</form>

登錄后復(fù)制

密碼字段


<form>
	密碼:<input name = "passwd1" type="password"><br />
	確認(rèn)密碼:<input name = "passwd2" type = "password"><br />	
</form>

登錄后復(fù)制

單選按鈕（Radio Buttons）


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

登錄后復(fù)制

復(fù)選框（Checkboxes)


<form>
愛好:<input name = "hobby" type = "checkbox" value="吃飯">吃飯
     <input name = "hobby" type = "checkbox" value="睡覺">睡覺
     <input name = "hobby" type = "checkbox" value="打游戲">打游戲<br />
 </form>

登錄后復(fù)制

簡單的下拉列表


<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>

登錄后復(fù)制

重置


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

登錄后復(fù)制

提交按鈕(Submit Button)


<input type="submit" value="同意以下服務(wù)協(xié)議，提交注冊信息">

登錄后復(fù)制

文本域(Textarea)


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

登錄后復(fù)制

完整代碼


<html>
	<head>
		<title>注冊頁面</title>
		<meta charset="utf-8">
	</head>
	<body>
		<form
			action="#"
			method="post"
			enctype="multiple/form-data"			
		>
		<h3>用戶注冊頁面</h3>
		用戶名:<input name = "username"type = "text"><br />
		<!--頭像上傳<input type="file" name="photos"><br />-->
		
		密碼:<input name = "passwd1" type="password"><br />
		確認(rèn)密碼:<input name = "passwd2" type = "password"><br />
		性別:<input name = "sex" value = "1" type = "radio" >男
		     <input name = "sex" value = "0" type = "radio" checked = "checked">女<br />
		愛好:<input name = "hobby" type = "checkbox" value="吃飯">吃飯
			<input name = "hobby" type = "checkbox" value="睡覺">睡覺
			<input name = "hobby" type = "checkbox" value="打游戲">打游戲<br />
		出生日期:
			<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>AA		
			</select>					
		<br />
		<input type="reset" value="重置"> &nbsp; &nbsp; &nbsp;
		<input type="submit" value="同意以下服務(wù)協(xié)議，提交注冊信息">		
		<br />
		<textarea name="wenben">
		</textarea>
		<input  type="hidden" name="token" value="cbff36039c3d0212b3e34c23dcde1456">		
		</form>
	</body>
</html>

登錄后復(fù)制

實驗結(jié)果

【推薦學(xué)習(xí)：Html5教程】

以上就是HTML如何制作表單的詳細(xì)內(nèi)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！

總結(jié)

以上是生活随笔為你收集整理的HTML如何制作表单(Axure如何制作点击弹框效果)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。