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

  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单HTML 表单页面,包含了按钮、输入框、单选框、复选框、下拉框文本域等元素: ```html <!DOCTYPE html> <html> <head> <title>表单页面</title> </head> <body> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name" required><br><br> <label for="gender">性别:</label> <input type="radio" id="male" name="gender" value="male" required> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female" required> <label for="female">女</label><br><br> <label for="hobby">爱好:</label> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">阅读</label> <input type="checkbox" id="music" name="hobby" value="music"> <label for="music">听音乐</label> <input type="checkbox" id="sports" name="hobby" value="sports"> <label for="sports">运动</label><br><br> <label for="city">城市:</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select><br><br> <label for="message">留言:</label><br> <textarea id="message" name="message" rows="5" cols="40"></textarea><br><br> <button type="submit">提交</button> </form> </body> </html> ``` 解释一下代码: - `<form>` 标签表示一个表单,包含了多个表单元素; - `<label>` 标签用于描述表单元素; - `<input>` 标签用于创建输入框,`type` 属性可以设置不同类型的输入框,如文本框、密码框、复选框、单选框等; - `<select>` 标签用于创建下拉框,内部使用多个 `<option>` 标签来定义选项; - `<textarea>` 标签用于创建文本域,可以输入多行文本; - `<button>` 标签用于创建按钮,`type` 属性可以设置不同类型的按钮,如提交按钮、重置按钮等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值