input的required属性 + label的for属性 + css变量 + 属性选择器 + 表格增删改 + 获取select选中的值

本文介绍了HTML的required属性用于实现必填输入验证，强调了label与input的配合使用以及属性选择器在CSS中的应用。此外，还探讨了CSS变量的便利性，并展示了如何在JavaScript中进行表格增删改操作及获取select选中值的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html+css部分

1、input的required属性

设置该属性后，这个输入框就是必填的，如果为空则不能提交。

<form action="">
    <input type="text" required>
    <button type="submit">提交</button>
</form>

若输入框为空，则出现以下提示：
在这里插入图片描述
注意：input必须在form标签中。

2、复选框和单选框最好放在label标签中，同时label的for属性的值与单/复选框的id相同。

<label for="hhh">
    <input type="radio" id="hhh">hhh
</label>

3、属性选择器：通过标签属性设置样式。例如以下代码为所有type=“radio”的标签设置margin为30px：

[type='radio']{
    margin: 30px;
}

4、css变量：可以在css中设置变量，例如一个颜色，如果其他地方要用这个颜色的话就可以直接调用这个变量，这样修改起来就比较方便了。例如：

html代码

<div>
    <div class="b b1"></div>
    <div class="b b2"></div>
</div>

css代码

:root{     /* :root相当于全局的意思，所有选择器内都可以使用该样式*/
   --bc: grey;
}
.b{
   width: 300px;
   height: 200px;
   border: 1px solid black;
   margin: 10px;
}
.b1{
   background-color: #5ab0ec;
}
.b2{
   background-color: var(--bc, blue);  /*blue为备用色，当该变量不能用时用该颜色，其余样式也是一样的*/
}

效果：
在这里插入图片描述
也可以在父元素中设置变量，这样的话就只有他的子元素能用，所以最好放在：root{}中。
这只是最基本的用法，更多用法可见：https://www.cnblogs.com/cina33blogs/p/7250421.html

js部分

1、表格增删改：

insertRow() —— 增加一行
insertCell() —— 增加单元格
deleteRow() —— 删除一行
修改的话可通过innerHTML实现。

2、获取下拉框选中的值：

html

<select id="bgColor">
     <option value="#FFFFFF" style="background-color: #FFFFFF">#FFFFFF</option>
     <option value="#E6E6E6" style="background-color: #E6E6E6">#E6E6E6</option>
     <option value="#81DAF5" style="background-color: #81DAF5">#81DAF5</option>
     <option value="#F4FA58" style="background-color: #F4FA58">#F4FA58</option>
 </select>

js

var index = document.getElementById("bgColor").selectedIndex; 
var inner = document.getElementById("bgColor").ptions[index].value;