HTML常用标签之表单标签
作用:收集用户信息
表单的组成:由表单域、表单控件(也称表单元素)和提示信息3个部分构成。
一、表单域
表单域是一个包含表单元素的区域。
在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
语法︰
<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域。 |
二、表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
2.1 input输入表单元素
在<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
语法︰
<input type="属性值" />
注意:<input />标签为单标签;type属性设置不同的属性值用来指定不同的控件类型。
<input>标签其他属性:
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
1. name和value是每个表单元素都有的属性值主要给后台人员使用。
2. name表单元素的名字,要求单选按钮和复选框要有相同的name值。
3. checked属性主要针对于单选按钮和复选框主要作用一打开页面,就要可以默认选中某个表单元素。
4. maxlength是用户可以在表单元素输入的最大字符数一般较少使用。
type属性的属性值及其描述:
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和“浏览""按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。 |
2.1.1 <input>表单元素
1.当表单元素想刚打开页面就默认显示几个文字时:可使用表单元素设置value属性=“值”
语法︰
用户名: <input type="text"value="请输入用户名”/>
2.当页面中的表单元素过多,需要区别不同的表单元素时,可使用name属性用于区别不同的表单
语法︰
用户名:<input type="text" value="请输入用户名" name="username" />
注意:name属性后面的值,是自定义的;radio (或者checkbox)如果是一组,我们必须给他们命名相同的名字。
语法︰
<input type="radio" name="sex"/>男
<input type="radio" name="sex”/>女
3.如果页面一打开就让某个单选按钮或者复选框是选中状态,可使用checked属性∶表示默认选中状态。用于单选按钮和复选按钮。
语法︰
性别:
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女”/>女
4.如果想让input表单元素展示不同的形态,可使用type属性设置不同形态,如:单选按钮或者文本框。
语法︰
<input type="radio" name="sex" value="男" checked="checked">男<input type="text" value="请输入用户名">
2.1.2 <label>标签
<label>标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元素当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
语法︰
<label for="sex">男</label>
<input type="radio" name="sex"id="sex"/>
核心: <label>标签的for属性应当与相关元素的id属性相同。
2.2 select下拉表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。
语法:
<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>
注意:1. <select>中至少包含一对<option> ;
2.在<option>中定义selected = " selected "时,当前项即为默认选中项。
2.3 textarea文本域元素
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
在表单元素中,<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
语法:
<textarea rows="3" cols="20">文本内容</textarea>
注意:1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用CSS 来改变大小。
HTML常用标签之表单标签相关推荐
- [JavaWeb-HTML]HTML标签_表单标签
HTML标签:表单标签 * 表单:* 概念:用于采集用户输入的数据的.用于和服务器进行交互.* form:用于定义表单的.可以定义一个范围,范围代表采集用户数据的范围* 属性:* action:指定提 ...
- Struts2中UI标签之表单标签介绍
1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.che ...
- java day32【HTML标签:表单标签 、CSS】
第一章 HTML标签:表单标签 * 表单: * 概念:用于采集用户输入的数据的.用于和服务器进行交互. * form:用于定义表单的.可以定义一个范围,范围代表采集用户数据的范围 * 属性: * a ...
- HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签 在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
- Web学习第二天——HTML的基本标签(媒体标签、链接标签、列表标签、表格标签、表单标签)
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
- 4、HTML——表格标签、表单标签
目录 一.表格标签:table-tr-td/th 1.合并单元格 1.1 合并同行不同列的单元格(列合并) 1.2 合并同列不同行的单元格(行合并) 二.表单标签:form 1.form标签 2.i ...
- HTML 表格标签、列表标签、表单标签(案例: 注册页面)
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...
- HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
- HTML 列表标签、表格标签、表单标签
HTML 列表标签.表格标签.表单标签 一.列表标签 二.表格标签 三.表单标签 四.综合练习 一.列表标签 <!DOCTYPE html> <html lang="en& ...
- HTML常用标签及表单标签
HTML初识 HTML(Hpyer Text Markup Language的缩写)译为"超文本标签语言",用来描述网页的一种语言.所谓超文本,因为它可以加入图片.声音.动画.多媒 ...
最新文章
- Ubuntu18.04 网络配置
- python psi计算_KL散度,PSI,IV值之间的故事
- .net中实现拖拽控件
- 2017计算机等级考试题,2017年计算机二级考试题库及答案
- 工作流实战_12_flowable 流程实例 终止流程
- JDK1.8的接口新特性
- 2021绩溪中学高考成绩查询,2021年宣城高中学校排名及录取分数线 宣城重点高中分数线...
- JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner
- (转)给趋势投资信仰充值:动量模型百年赚钱史
- SQL查询分析器SQL语句导入TXT文件
- 后台管理系统 - 权限设计
- bootstrap table 超链接的添加 a标签
- FlashBuilder精选插件
- win10可用空间变成未分配_有关如何在win10系统中对未分配的磁盘空间进行分区的详细教程...
- Vue 使用jsPlumb 实现连线绘图
- K8S理论篇----K8S的概述
- 数据库系统概论 实验报告答案 实验七:视图、索引及数据安全
- iphone同步android短信恢复,android上的短信怎么恢复到iphone
- 隆昌一中高考成绩查询2021四川,四川内江排名靠前的四大高中,有争议?2020年高考成绩说话!...
- 离别信——CJ-麦科勒姆亲笔:致亲爱的波特兰