Rumah > hujung hadapan web > html tutorial > HTML如何制作表单

HTML如何制作表单

醉折花枝作酒筹
Lepaskan: 2023-01-04 09:34:47
asal
29091 orang telah melayarinya

制作表单的方法:首先使用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>
Salin selepas log masuk

在这里插入图片描述

密码字段

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

在这里插入图片描述

单选按钮(Radio Buttons)

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

在这里插入图片描述

复选框(Checkboxes)

<form>
爱好:<input name = "hobby" type = "checkbox" value="吃饭">吃饭
     <input name = "hobby" type = "checkbox" value="睡觉">睡觉
     <input name = "hobby" type = "checkbox" value="打游戏">打游戏<br />
 </form>
Salin selepas log masuk

在这里插入图片描述

简单的下拉列表

<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>
Salin selepas log masuk

在这里插入图片描述

重置

<form>
<input type="reset" value="重置">
 </form>
Salin selepas log masuk

在这里插入图片描述

提交按钮(Submit Button)

<input type="submit" value="同意以下服务协议,提交注册信息">
Salin selepas log masuk

在这里插入图片描述

文本域(Textarea)

<textarea name="wenben"></textarea>
Salin selepas log masuk

在这里插入图片描述

完整代码


	
		注册页面
		
	
	
		

用户注册页面

用户名:
密码:
确认密码:
性别:
爱好:吃饭 睡觉 打游戏
出生日期:
<input type="submit" value="同意以下服务协议,提交注册信息">
Salin selepas log masuk

实验结果

在这里插入图片描述

【推荐学习:Html5教程

Atas ialah kandungan terperinci HTML如何制作表单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan