表单标签:表单控制(包含了具体的表单功能项,如单行文本输入框,复选框,提交按钮,重置按钮等);提示信息(一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作);表单域(相当于一个容器,用来容纳所有的表单控制和提示信息,如果不定义表单域,表单中的数据就无法传送到后台服务器)

            (1)input控件:<input />为单标签。type为最基本的属性。

                                        type:text(属性值)  单行文本输入框

                                                Password      密码输入框

                                                Radio         单选按钮

                                                Checkbox      复选框

                                                Button        普通按钮

                                                Submit        提交按钮

                                                Reset         重置按钮

                                                Image         图像形式的提交按钮

                                                File          文件域

                                       Name:由用户自定义   控件的名称

                                       Value:由用户自定义  input控件中的默认文本值

                                       Size:正整数       input控件中在页面中的显示宽度

                                       Checked:checked     定义选择控件默认被选中的项

                                       Maxlength:正整数    控制允许输入的最多字符数

            (2)lable标签:用于绑定一个表单元素,当点击lable标签的时候,被绑定的表单元素就会获得输入焦点。

                           for属性规定lable与哪个表单元素绑定

                                   <lable for=“male”>male</lable>

                                   <lable type=“radio” name=“sex” id=“male” value=“male”>

            (3)textarea控件文本域:<textarea></textarea>

            (4)下拉菜单:<select>

                                            <option>选项1</option>

                                            <option>选项2</option>

                                            <option>选项3</option>

                                                 ......

                                           </select>(在option中定义selected=selecteds时,当前即为默认选中项)。

            (5)表单域:form被用于自定义表单域,创建一个表单,

                            <form action=url地址 method=提交方式 name=表单名称>

                         常用属性:action(将收集的信息传递给服务器处理,action指接收并处理表单数据的服务器程序的url地址);                                                   method(用于设置表单数据的提交方式,其取值为get或post);name(用于指定表单的名称)

             类选择器:.类名{属性1:属性值1;} 注意:每个表单都有自己的表单域

表单控件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	用户名:<input type="text" value ="用户名"/><!--这是一个文本框--><br/>
	 密码:<input type="password" maxlength="6"/> <!-- 这是一个密码框 ctrl+/ maxlength密码的最大长度 --><br />
	 性别: <input type="radio" name ="sex" />  女 <input type="radio" name ="sex" />  男 <input type="radio" name ="sex" checkd ="checked" />  人妖
	 <input type="radio" name ="sex1" />  未知<!-- 单选框 如果是一组通过相同的name值来实现 sex与sex1名不一样,所以能选两个--><br />
	 爱好:<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />篮球 <input type ="checkbox" name="hobby" />排球  <!-- 复选框 可以同时选多个 checkd ="checked"为默认--><br />
	 搜索:<input type="button" value="搜索啥">  <!-- 普通按钮 --><br />
	 <input type="submit" value="提交表单"/> <!-- 提交按钮 -->
	 <input type="reset" value="重置表单"/> <!-- 重置按钮 --><br />
	 <input type="image" src="ta.jpg"/> <!-- 
	 图像按钮 --><br />
	 上传头像:<input type="file" /> <!-- 文件按钮 -->
</body>
</html>

表单域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	用户名:<input type="text" value ="用户名"/><!--这是一个文本框--><br/>
	 密码:<input type="password" maxlength="6"/> <!-- 这是一个密码框 ctrl+/ maxlength密码的最大长度 --><br />
	 性别: <input type="radio" name ="sex" />  女 <input type="radio" name ="sex" />  男 <input type="radio" name ="sex" checkd ="checked" />  人妖
	 <input type="radio" name ="sex1" />  未知<!-- 单选框 如果是一组通过相同的name值来实现 sex与sex1名不一样,所以能选两个--><br />
	 爱好:<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />篮球 <input type ="checkbox" name="hobby" />排球  <!-- 复选框 可以同时选多个 checkd ="checked"为默认--><br />
	 搜索:<input type="button" value="搜索啥">  <!-- 普通按钮 --><br />
	 <input type="submit" value="提交表单"/> <!-- 提交按钮 -->
	 <input type="reset" value="重置表单"/> <!-- 重置按钮 --><br />
	 <input type="image" src="ta.jpg"/> <!-- 
	 图像按钮 --><br />
	 上传头像:<input type="file" /> <!-- 文件按钮 -->
</body>
</html>

文本域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<form action="xxx.php" method="get" name="userMessage">
	用户名:<input type="text" value ="用户名"/><!--这是一个文本框--><br/>
	 密码:<input type="password" maxlength="6"/> <!-- 这是一个密码框 ctrl+/  注释的快捷键 maxlength密码的最大长度 --><br />
	 性别: <input type="radio" name ="sex" />  女 <input type="radio" name ="sex" />  男 <input type="radio" name ="sex" checkd ="checked" />  人妖
	 <input type="radio" name ="sex1" />  未知<!-- 单选框 如果是一组通过相同的name值来实现 sex与sex1名不一样,所以能选两个--><br />
	 爱好:<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />篮球 <input type ="checkbox" name="hobby" />排球  <!-- 复选框 可以同时选多个 checkd ="checked"为默认--><br />
	 搜索:<input type="button" value="搜索啥">  <!-- 普通按钮 --><br />
	 <input type="submit" value="提交表单"/> <!-- 提交按钮 -->
	 <input type="reset" value="重置表单"/> <!-- 重置按钮 --><br />
	 <input type="image" src="ta.jpg"/> <!-- 
	 图像按钮 --><br />
	 上传头像:<input type="file" /> <!-- 文件按钮 -->
	 </form>
	<!--
标签名称:form 表单标签
属性:action:提交的去向,目标地址的url
method:设置提交请求的方式,get和post;默认为get
get和post提交有什么区别?
get传输:将内容信息放在地址栏传输,而且长度限制在1k,而且安全性不好。
post传输:将内容房子body信息中传输。没有长度限制。
子标签:
input标签:需要提交其中的value,必须有一个name属性。
属性:type:password 等
//-
通过下面的实例的演示,发现在某些情况下可以用form去做链接,而且做链接的同时还能提交数据到
这个目标的地址文件上。
fieldset标签:定义域
legend标签:定义域的标题
-->
</body>
</html>

新增表单属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	用户名:<input type="text" placeholder="请输入用户名" autofocus />
	上传头像:<input type="file" multiple />
	<h4>自动记录完成</h4>
	1.autocomplete首先需要提交按钮<br />
	2.这个表单您必须给他名字
	<form action="">
		姓名:<input type="text" autocomplete="on" name="userName" /><br />
		<input type="submit" />
		</form>
		昵称:<input type="text" required accesskey="s"/>
		<!-- 边框里不能为空 --><br />
		
</body>
</html>

新增表单type类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<fieldset>
		<legend>HTML5新增的input type类型  那些表单</legend>
		<form action="">
			邮箱:<input type="email" />  <!-- aa@aa.com --><br />
			手机:<input type="tel" />  <!--  手机格式 数字 --><br />
			数字:<input type ="number" />  <!-- 只能是数字 --><br />
			url:<input type ="url" />  <!-- 网址格式 --><br />
			搜索:<input type ="search" />  <!-- 搜索格式 --><br />
			区域:<input type ="range" />  <!-- 区域格式  滑块 --><br />
			时间:<input type ="time" />  <!-- 时间格式  小时 分钟 --><br />
			<input type="submit" />
			年月日:<input type ="date" />  <!-- 获得年月日 --><br />
			月份:<input type ="month" />  <!-- 获得月份 --><br />
			星期:<input type ="week" />  <!-- 获得年 星期 --><br />
			颜色:<input type ="color" />  <!-- 获得颜色 --><br />
		</form>


	</fieldset>
</body>
</html>

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐