HTML学习|初识表单post和get提交、文本框和单选框、按钮、多选框和下拉框、文本域和文件域、搜索框滑块和简单验证、表单的应用、表单初级验证

初识表单post和get提交

form标签是表单，method控制表单提交方式，get方式，表单填写的参数能够在跳转的url地址中看到，post方式是看不到的，action是向何处跳转表单数据

input标签，且type=text，是文本输入框，name设置的就是这个输入内容的参数名称

input标签，且type=password，是密码输入框，这个输入内容在页面上会变成保密的形式

input标签，且type=submit代表这是一个表单的提交按钮，value可以设置这个按钮的名称

input标签，且type=reset代表这是一个重置按钮，可以将表单输入的内容全部清除

文本框和单选框

文本框 

其中，文本输入框，也可通过value设置框中的默认值，maxlength可以设置文本框能输入的最多字符，size可以设置文本框的大小

单选框

input标签，且type=radio则代表是单选框，value代表的是选项的值，name代表的是参数名称，如果两个单选框的name一样，则在网页上勾选的时候，只能勾选其中一个

按钮、多选框、下拉框

按钮

按钮有如下四种按钮

多选框

input标签且type=checkbox的为多选框，value代表参数值，name代表参数名，页面勾选的时候即使name一样也能够勾选多个

无论是单选框还是多选框，在选项的后面加checked代表默认勾选

下拉框

select标签是下拉框，name代表参数名，option标签是一个个选项，value代表选项值，选项里加selected代表默认选项

文本域和文件域

文本域

textarea标签是文件域，name代表参数名称，cols和rows可设置文本域的宽高

文件域

input标签且type=file是文件域，name代表文件参数名

搜索框滑块和简单验证

搜索框

input标签，且type=search是搜索框，name是参数名，与文本框的区别就是在页面上，有个清除输入内容的按钮

滑块

input标签，且type=range是滑块，常用于音量的设置，name代表参数名，min和max分别代表滑块的最小值和最大值，step代表了滑块每拉取一下的变化步长

简单验证

邮箱验证

input标签且type=email，则输入的内容则会校验是否是邮箱格式

url验证

input标签且type=url，会校验输入内容是否符合url格式

数字验证

input标签且type=number，max和min设置数值能取的最大最小值，name代表参数名，step代表每次点击上或者下数字变化的步长

表单的应用

readonly

readonly代表该文本框默认值不能更改，只能看

disabled

disabled代表该选项不能够被选择

hidden

hidden可以让该输入框输入的参数或默认值在页面上不显示，但是提交的时候这个参数也会被携带

增强鼠标可用性

在一个文本上用label标签圈起来，然后for后面这个值代表如果点击这个文本要跳转到的输入框的id，比如我们设置一个id=mark的输入框，如果点击“你点我试试”，鼠标会默认选中这个输入框，方便后续输入内容

表单初级验证

placeholder

文本框后加placeholder可以设置文本框的提示内容

required

在文本框后加required，可以验证该文本框内容是否为空

pattern

在文本框后加pattern=“xxx”可以使用正则表达式来校验文本框输入内容的格式