HTML总结(五)之表单标签

表单标签

1.为什么需要表单
使用表单目的是为了收集用户信息
2.表单的组成
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单控件)提示信息三部分组成
3.表单域
表单域是一个包含表单元素的区域
在HTML标签中,

标签用于定义表单域,以实现用户信息的收集和传递
会把它范围内的表单元素信息提交给服务器

"url地址" method="提交方式" name="表单域名称">
各种表单元素控件

常用属性:
HTML总结(五)之表单标签_第1张图片4.表单控件(表单元素)
1)input输入表单元素
2)select下拉表单元素
3) textarea文本与元素
4.1 表单元素
标签用于收集用户信息
语法格式:

"属性值"/>
  • 标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型
    type属性的属性值及其描述如下:
属性值 描述
button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
checkbox 定义复选框
file 定义输入字段和“浏览”按钮,供文件上传
hidden 定义隐藏的输入字段(不常用)
image 定义图像形式的提交按钮(不常用)
password 定义密码字段 该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮 重置按钮会清除表单中的所有数据
submit 定义提交按钮 提交按钮会把表单数据发送到服务器
text 定义单行的输入字段 用户可在其中输入文本 默认宽度为20字符

除type属性外,标签还有其他很多属性
其常用属性如下:
HTML总结(五)之表单标签_第2张图片(1)name和value是每个表单元素都有的属性值,主要给后台人员使用
(2)name表单元素的名字,要求单选按钮和复选按钮都要有自己相同的名字
举例:

/*要有相同的name,这样在单选时,才可以只选择一个,否则两个按钮可以同时选中*/
"radio" name="sex" value="男" id="man">
  "radio" name="sex" value="女" id="woman">

(3)checked属性主要针对单选框和复选框,主要作用一打开页面,就要可以默认选中某个表单元素
(4)maxlengtn是用户可以在表单元素输入的最大字符数,一般很少使用

/*默认选中"男"这个按钮*/
"radio" name="sex" value="男" id="man"checked="checked">
  "radio" name="sex" value="女" id="woman">

4.2标签
标签为input元素定义标注(标签)
标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
举例:

/*当点击“男”这个字时,光标就会转到按钮位置并选中。即点击“男”后,男这个按钮就选中了*/
"radio" name="sex" value="男" id="man"> 

"radio" name="sex" value="女" id="woman">

核心:标签的for属性应当与相关元素的id属性相同
4.3标签控件定义下拉列表
语法:


注意:(1)

注:cols=“每行中的字符数” rows="显示的行数"
我们在实际开发中不会使用,都用css来改变大小
到此,我们大概介绍完了HTML的全部内容。后面将会再来一个系列,介绍css相关知识。
好啦,HTML完美收官。
若有不对之处,欢迎评论指正。感谢!

你可能感兴趣的:(HTML+CSS,html)