HTML表单部分功能汇总

比眉伴天荒 2022-05-29 03:19 85阅读 0赞

## 一、占位符（placeholder）的使用 ##

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

运行结果  
![这里写图片描述][Image 1]

--------------------

## 二、必填项（required） ##

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

正常情况下

不输入任何内容，点击提交，页面将跳转到百度首页  
![这里写图片描述][Image 1]、

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

点击无内容点击提交  
![必填项][Image 1]

--------------------

## 三、关于单选 ##

1.列表内容

最普通的单选

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

只有点击“○”才会被选中  
![这里写图片描述][Image 1]

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”也会被选中  
![这里写图片描述][Image 1]

--------------------

## 四、 ##

[Image 1]: