HTML---表单

文章目录

• 目录

  文章目录

  一.表单概念

  二.表单中的标签 

   框图标签

  下拉菜单标签

   多行文本域

  文件域

   邮箱标签 

  网址标签

   三.案例

   四.表单高级应用

   隐藏域属性

  只读属性

  禁用 属性

  表单元素标注 

   五.表单验证方法

   placeholder

   required

  pattern 

  总结

---

一.表单概念

  HTML表单是网页上用于收集用户输入信息的一种元素。它由一系列输入字段（input）、选择字段（select）、文本区域（textarea）以及提交按钮（submit）等组成。

表单的目的是收集用户的数据并将其发送到服务器进行处理。用户可以在表单中输入文本、选择选项、上传文件等。然后，当用户点击提交按钮时，表单的数据会被发送到定义的处理程序或服务器端脚本进行处理。

语法：

method常用值

GET	向服务器发送数据请求，适合用于获取数据
POST	向服务器发送数据请求，适合用于发送数据

二.表单中的标签 

•  框图标签

：

 在HTML中，表单是用来收集用户输入的一种元素。表单中的input元素被用来定义输入字段，用户可以在这些字段中输入文本、数字、日期等不同类型的数据。

input 常用属性

type	定义框图类型，常见的值有text(文本),password(密码),submit(登录) reset(重置) radio(单选) checkbox(多选) button(普通按钮) image(图片)
name	定义当前框图的名字，服务器将用户在框图中输入的信息保存到对应名字的框图中。
value	保存用户通过该框图输入的信息，该值自动生成。
size	设置框图长度
length	设置框图支持输入信息的自大长度
checked	默认选中该框图

		
		

		

			请输入账号：
		
	
		

			请输入密码：
		
		

			
			     
			
            
			
		
		

			请选择性别：
			 男
			 女
		
		

			请输入爱好：
			唱
			跳
			rap
			篮球
			看坤
		

• 效果展示 

• 下拉菜单标签

语法： ...：

HTML中的下拉菜单可以使用元素来创建，内部使用元素表示每个选项。下面是一个基本的例子：

元素常用属性

selected	指定该选项默认被选中。
disabled	指定该选项不可用，无法选择
label	为选项提供一个标签，使其更易于理解
hidden	指定该选项不会显示在下拉菜单中，可以在后台使用。
value：	用于在提交表单时传递选中的选项值

    请选择地址：
    

陕西 山西 江苏 安徽   省      南京 无锡 苏州 常州   市

• 效果演示 

 

 多行文本域

在HTML中，可以使用textarea标签来创建多行文本域。

注意：rows和cols属性分别用于指定文本域的行数和列数。根据需要调整这两个属性的值。

	请输入简介：、
	

文件域

• 效果演示  

 

 邮箱标签 

• 效果演示 

	请输入邮箱：
	

网址标签

 三.案例

	
		
		
	
	
		
		
			
电子邮箱：
			
设置密码：
			
真实姓名：
			
性别：
				 男
				 女
			
			

				生日：
				
					2020
					2021
					2022
					2023
				   	年   
				
					9
					10
					11
					12
				   月   	
				
					20
					21
					22
					23
				   日   
			
			
为什么要填写我的生日?
			
请输入原因：
			

				我现在的身份是:    
				
					请选择身份
					教师
					学生
					其它
				   (非常重要)
			
			

				
				看不清换一张
			
			
请输入验证码: 
			

			
	

• 效果演示  

 四.表单高级应用

 隐藏域属性

 在提交表单时，隐藏域的值会作为表单数据一同发送到服务器。服务器可以通过接收表单数据的方式来获取隐藏域的值，并进行相应的处理。

	后方内容是隐藏内容：
    

只读属性

     文本框中无法剪辑内容：   
    

禁用 属性

在上面的示例中，如果选择了"禁用"选项，则输入字段将被禁用，否则将启用。

表单元素标注 

标签：用于定义输入字段的标签或名称。与相应的表单元素相关联，使得当用户点击标签时，关联的表单元素会聚焦或选中。

	请选择性别：
	男 
	女

• 效果演示  

 五.表单验证方法

•  placeholder

该属性值用于设置框图中的提示语 

	请输入账号：

• 效果演示 

 

•  required

该属性值用于设置文本框必须填写内容否则无法登录。 

    请输入密码：

 

pattern 

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单 

	请输入手机号：
	

•  效果演示

总结