HTML表单部分功能汇总

xiaoxiao2021-02-28  29

一、占位符(placeholder)的使用

占位符,即用户在input输入框输入任何数据之前,输入框内显示的预定义文本。 直接看代码,一看就懂了

<input type="text"> <br/><br/> <input type="text" placeholder="请输入内容">

运行结果


二、必填项(required)

要指定某些选项为必填项,不填用户将无法提交表单,

正常情况下

<form action="http://www.baidu.com"> <input type="text" placeholder="请输入内容"> <input type="submit" value="提交"> </form>

不输入任何内容,点击提交,页面将跳转到百度首页 、

当设置text属性为必填项后,代码如下

<form action="http://www.baidu.com"> <input type="text" placeholder="请输入内容" required> <input type="submit" value="提交"> </form>

点击无内容点击提交


三、关于单选

1.列表内容

最普通的单选

<input type="radio" name="sex" value="male" />Male

只有点击“○”才会被选中

2.已被选中

<input type="radio" name="sex" value="male" checked/>Male

和1一样,只有点击“○”才有效果

3.点击文本,同样起效果 此时,就要用到一个<label>标签

<label>标签为 input 元素定义标注(标记)。 label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。 再通俗点说,就是用户鼠标点击控件相关的文本,也会触发控件,让它选中或取消

<!--一--> <label for="male">Male</label> <input type="radio" name="sex" id="male"/> <br /><br /> <!--二--> <label><input type="radio" name="sex" value="male"/>Male</label>

对于一:<label> 标签的 for 属性应当与相关元素的 id 属性相同,因为”for” 属性可把 label 绑定到另外一个元素,也就是说,此时必须要有id与for属性相对应,不然不起作用,记住,如果按照第一种方法,必须要有id

结果,点击“Male”也会被选中


四、

转载请注明原文地址: https://www.6miu.com/read-2628519.html

最新回复(0)