HTML5学习（三）---Web表单

最新推荐文章于 2024-11-01 15:19:31 发布

冬天一起吃雪糕

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量277

点赞数

分类专栏： HTML5 学习笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/ningpeixi679/article/details/113448155

版权

学习笔记同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML5

5 篇文章 0 订阅

订阅专栏

Web表单

理解表单

表单基本工作方式都是用户填写信息然后单击按钮提交，浏览器手机输入的信息，并将其发送给Web服务器。

传统表单

form元素用来组织表单部件，负责告诉浏览器数据提交到哪，方法是在action中提供一个URL
表单控件里面的input

通过占位符文本添加提示

使用placeholder属性创建占位符

<input id="name" placeholder="xiaoming">

焦点：挑选正确的起点

在相应的元素上通过JavaScript调用focus()方法，帮助用户完成焦点切换。
或者使用autofocus属性，只能给一个input或textarea元素添加

<input id="name" placeholder="xiaoming" autofocus>

验证

客户端验证时在浏览器中检查错误，没有错误再提交，目的是减少填表人的麻烦
服务端验证时用户将数据提交给服务器之后再进行验证，服务器段代码负责检查所有细节，确保再进行下一步操作之前所有数据都是有效的。

HTML5验证原理

验证原理：告诉浏览器验证哪个字段。
如果某个字段不能留空，使用required属性

<input id="name" placeholder="xiaoming" autofocus required>

关闭验证

在form元素中添加novalidate属性，可以禁用整个表单的验证功能

<form id="student" action="#" novalidate>

添加一个额外的按钮实现强制对表单严格验证

<input type="submit" value="Save" formnovalidate>

验证样式挂钩

根据输入字段的验证状态改变消息的外观。
使用新的伪类：

required和optional（选题），根据字段是否使用required属性应用不同样式
valid和invalid，根据控件中是否包含错误来应用不同样式
in-range和out-of-range，根据空间的min和max属性判断输入值是否超出范围，从而为控件应用样式。

input:required{
	background-color: red;
}

使用正则表达式

准备好正则表达式后，通过pattern属性将其应用到input或textarea元素

<input id="promoCode" placeholder="xiaoming" pattern="[A-Z]{3}-[0-9]{3}">

自定义验证

检查相应字段是否有错，绑定onInput事件

<textarea id="comments" oninput="validateComments(this)">< /textarea>

在这个函数里面调用setCustomValidity()方法

浏览器对验证支持

在这里插入图片描述

电子邮件

电子邮件控件支持multiple属性，添加了这个属性后就可以在同一个字段里输入多个电子邮件地址，不过多个地址之间只有逗号分隔。

搜索框

使用search类型。

电话号码

电话号码使用tel类型。

数值

number类型用于常规数值，通常配合min和max属性使用,只接受整数，但是可以设置step属性，表示可以接受的数值之间的间隔

<input id=“age" type="number" min="0" max="120" step=”0.1“> <br>

滑动条

使用range类型，表示整数或小数值。

<input id=“age" type="range" min="0" max="120" step=”0.1“><br>

日期和时间

几种类型：
在这里插入图片描述

颜色

使用color类型

新元素

显示输入建议

这个元素可以让普通文本框中添加一个下拉建议列表，而且必须配合一个标准的文本框使用：

<legend>What`s Your Favorite Animal?</legend>
            <input id="favoriteAnimal" list="animalChoices">
            <datalist id="animalChoices">
                <select  id="favoriteAnimalPreset">
                    <option value="alpaca" label="Alpaca"></option>
                    <option value="Dog" label="Dog"></option>
                    <option value="Cat" label="Cat"></option>
                    <option value="Crab" label="Crab"></option>
                    <option value="pig" label="pig"></option>
                    <option value="anaconda" label="anaconda"></option>
                </select>
            </datalist>