html表单的3个初级验证,表单

1.表单的语法

form表单能够获取用户的输入的内容、选择、上传文件全部发送给后端。

名字：

密码：

action：控制数据提交的目的地

不写的情况下，默认提交到当前页面所在的路径。

只写路径后缀，后面框架上会资源定位到某个位置。

method：控制数据提交的方式

get：form表单默认是get请求

post：提交数据

label标签：

通常情况下 input 标签需要结合 label 标签一起使用。

username：

在label标签中绑定id值，之后点击label标签内的任意位置都可以自动选中输入框。

input标签：

input 标签就类似于前端的变形金刚，根据 type 参数的不同，展示不同的功能

所有获取用户输入的标签，都应该有name、value属性

name：类似于字典中的key

value：input 输入框获取到的用户输入都会放到input框的value属性中

针对选择框，传到后端的数据，应该设置value值，由value值决定

2.表单元素格式

//

//文本框

//密码框

//单选按钮

男

女

//复选框

运动

聊天

游戏

//列表框

//按钮框

* 重置按钮

* 图片提交按钮

* 普通按钮

// 多行文本域

文本内容

// 文件域

// 邮箱

邮箱：

// 网址

输入你的网址：

// 数字

输入您的数字：

// 滑块

输入您的数字：

// 搜索框

输入您要搜索的内容：

3.表单的高级应用

隐藏域

只读

禁用

4.表单元素的标注

增强鼠标的可用性；自动将焦点转移到与该标注相关的表单元素上

标注的文本

5.表单初级验证的方法

placeholder 文本框输入内容提示

特点：

input类型的文本框提供一种提示(hint)

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email和password等类型

required 规定文本框内容不为空

pattern 正则表达式规则

特点：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

6.html语义化及其优点

html语义化：在使用html编程时，根据内容选择合适的标签(代码语义化)，增加可读性与SEO。

为什么要语义化(优点)：

为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构；

提高用户体验；

有利于SEO；

方便其他设备渲染网页；

便于团队开发和维护。