初识表单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”可以使用正则表达式来校验文本框输入内容的格式