首页 前端知识 html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

2024-02-29 12:02:01 前端知识 前端哥 674 196 我要收藏

一、form元素

html表单是网页中最常见元素之一,通过form元素定义表单,表单中包含各种表单项。

form的action属性

action:提交表单数据时,后台接收的接口(提交表单数据向何处发送),若设置为空以及#则默认提交当前页面的数据。
action属性

form的method属性

method属性:提交表单数据的方式,分别为get和post两种方式。method属性
get方式的地址栏可见
在这里插入图片描述

二、常见表单项

表单项包含文本框、单选框、复选框、按键等。根据type属性值 ,input元素有多种变化。

1.文本框 text

<input type="text">定义一个单行输入文本框。

代码图
maxlength允许输入框中输入字符的最大长度位,这里只能输入10个字符

效果图:
效果图

2.单选框 radio

<input type="radio">定义一个单行输入文本框。

单选框
其中name的值必须一致,否则将不能进行单选,会全部选中。
value 是控制传入服务器的值,比如我们这里如果选择了男,则传入的sex的值就是man
在这里插入图片描述

3.多选框checkbox

多选框
其中name的值可写可不写,可以一致也可以不一致, 没有多大影响。在这里的作用就是提交时将值与提交的结果值连起来,显示的就是"aihao = 打篮球 或者跳舞、学习、rap",但必须设置value值。

checked=“checked”:设置单选框默认选中项。
在这里插入图片描述

4.下拉列表select

下拉列表
selectd为默认选中项,此处会默认选中武侯。
这里的 value对应着id的值,切忌不要出现中文,比如这里选中武侯,那么提交的数据就是dizhi = wuhou。
在这里插入图片描述

5.文本域textarea

文本域
其中rows 代表行数,控制高度
cols 代表列数,控制宽度。
文本域

6.按钮button

6.1 提交按钮type=submit

<input value="这是提交按钮" type="submit">

6.2 重置按钮type=reset

<input value="重置按钮" type="reset">

6.3一般按钮type=button

<input value="一般按钮" type="button">

表单外的button按钮

<button>提交</button>

button这个标签在form表单标签里面有默认提交的功能,但是在form标签外面就是一个单纯的按钮
在这里插入图片描述

效果如图:
按钮效果图
button在form标签里会提交数据。此时button在form里面就会有提交的功能和submit功能一样。
在这里插入图片描述
button在form标签外面不会提交数据,就是一个普通按钮。
在这里插入图片描述
效果图
type="button"也只是一个普通按钮和button在form标签外一样,只是一个单纯的按钮,没有提交数据的功能。

7.密码输入框 password

<input id="password" type="password">

密码输入后显示为不可见,如图:

密码框

三、html5新增的表单type属性值

1.type=“email”

type="email"属性:验证只能输入邮箱格式,否则不能通过
 e-mial:<input type="email" name="useremail">

代码图:
email类型代码
效果图:
email类型效果

2. type=“tel”

 type="tel":不进行验证,主要是在移动端打开数字键盘 
    电话:<input type="tel" name="tel">

代码图:
tel类型代码

3.type=“url”

type=“url”: 验证:只能输入合法的网址,必须包含http://

网址:<input type="url" name="url">

代码图:
url类型代码
没有按照要求填写的效果:
没有按照要求填写的效果
按照要求填写的效果(正确的效果):
在这里插入图片描述

4.type=“range”

type=“range”:产生一个滑动条

 范围:<input type="range" name="range" min="1" max="10" value="3">

代码图:
range代码图
效果图:
range效果图

5.type=“search”

type=“search”:使搜索框更人性化,提供删除“X”符号,来快速清除所输入的内容

搜索框:<input type="search" name="search">

代码图:
search类型代码图
效果图:
search类型效果图

6.type=“date”

type=“date”:日期框,可以选择年、月、日

 日期:<input type="date" name="riqi">

代码图:
date代码图
效果图:
date效果图

7.type=“month”

type=“month”:可以选择年和月

月和年:<input type="month" name="nian">

代码图:
month代码图效果图:
month效果图

8.type=“week”

type=“week”:可以选择年和第几周

年和周:<input type="week" name="week">

代码图:
month代码图
效果图:
month效果图

9.type=“time”

type=“time”:可以选择时、分、秒

 <!-- 可以选择时、分、秒 -->
    时间:<input type="time" name="time">

代码图:
time代码图
效果图:
time效果图

10.type=“datetime-local”

type=“datetime-local”:选择年月日和现在的时刻

时刻:<input type="datetime-local" name="datetime">

代码图:
datetime-local
效果图:
datetime-local效果图

11.type=“number”

type=“number”:只能输入数字的数字框包含小数点 value时=为当前值

数字(1到8之间):<input type="number" name="shuzi" min="1" max="8" value="2"

代码图:
number代码图
效果图:
number效果图

12.type=“color”

type=“color”:颜色选择器

<!-- 颜色选择器 -->
    颜色:<input type="color" name="color">

color代码图
color效果图

html5新增type属性值总结图

h5新增的type属性如图

四、html5新增的表单属性

1.required

required:限制用户该项为必填项,不能为空。

e-mial:<input type="email" name="useremail" required>

required代码图
效果图如下:
required必填的效果

2.placeholder

placeholder:给input输入框添加默认提示信息
placeholderd代码图
效果图:
在这里插入图片描述

3.autofocus

autofocus:自动获取焦点。
auotofocus代码
效果图如下:pic_center
在这里插入图片描述

4.autocomplete

autocomplete=“on”:显示历史记录,autocomplete=“off”不显示历史记录
使用自动完成必须同时满足两个条件:
1.必须成功提交过
2.当前添加autocomplete的元素必须有name属性
autocomplete=“off”的效果图:
在这里插入图片描述

在这里插入图片描述
autocomplete=“on"代码图:
在这里插入图片描述

autocomplete=“on的效果图:(但是要注意的是:必须要是成功提交过的才能够显示)
on的效果图

5.novalidate

在 input输入类型,当提交表单时,会对这些输入内容进行验证。
novalidate属性:在提交表单时不对form或input进行验证:在这里插入图片描述

6.multiple

multiple属性用在type值为email和file的input类型中,设置了multiple值后,可以在input中输入多个值,比如在email中输入多个邮箱,中间用逗号隔开。
值得注意的是:在选择文件的时候要按住Ctrl键才能同时选择多个文件

e-mial:<input type="email" name="useremail" multiple>

在这里插入图片描述
效果如图:
在这里插入图片描述
提交后的参数显示:
在这里插入图片描述

7.pattern

pattern:正则表达式,由一系列字符和数字组成,用于匹配某个句法规则.属性适应于text、search、url、telephone、email和password类型的input元素.
在这里插入图片描述

8.form

form属性:在以前,当我们需要写form表单的时候,需要把form的控件写在<form</form双标签中,我们可以脱离form的双标签写在其他控件,只需要在末端加上主要的form表单的id就可以了

<form action="#" method="post" id="myform">
        <input type="name" autofocus/>
        <input type="button" value="提交">
    </form>
    <input type="tel" placeholder="请输入你的电话" form="myform">

在这里插入图片描述

效果图:
form属性效果图

html5新增的表单属性总结图

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2941.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!