表单标签,表单域
表单标签:表单控制(包含了具体的表单功能项,如单行文本输入框,复选框,提交按钮,重置按钮等);提示信息(一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作);表单域(相当于一个容器,用来容纳所有的表单控制和提示信息,如果不定义表单域,表单中的数据就无法传送到后台服务器)(1)input控件:<input />为单标签。type为最基本的属性。...
表单标签:表单控制(包含了具体的表单功能项,如单行文本输入框,复选框,提交按钮,重置按钮等);提示信息(一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作);表单域(相当于一个容器,用来容纳所有的表单控制和提示信息,如果不定义表单域,表单中的数据就无法传送到后台服务器)
(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>
更多推荐
所有评论(0)