HTML_11——表单(3)

2021/8/23 6:30:28

本文主要是介绍HTML_11——表单(3),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. label元素

提高与用户的交互属性

隐式关联

显示关联

<form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male">
    <br>
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female">
</form>

image-20210820021029706

2. fieldset和legend元素

<fieldset> 标签会在相关表单元素周围绘制边框,将表单进行分组.

<legend> 标签为 fieldset 元素定义标题,为其第一个子元素.

<form>
    <fieldset>
      <legend>Personalia:</legend>
      Name: <input type="text"><br>
      Email: <input type="text"><br>
      Date of birth: <input type="text">
    </fieldset>
  </form>

image-20210820021222216

3. select和option元素

select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表



<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 



<select>
  <option value="volvo" style="display:none">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  


image-20210820021547650

上述例子展示了 <select> 的典型用法。元素中设置了 id 属性以将其与 label 元素关联在一起,提高可及性(accessibility)。name 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 </select> 中的一个 `` 元素定义。

每个 <option> 元素都应该有一个 value 属性,其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性,则 value 值默认为元素中的文本。你可以在 </option><option> 元素中设置一个 selected 属性以将其设置为页面加载完成时默认选中的元素。

<select> 元素有一些用于控制元素的特有属性,例如 multiple 规定了能不能同时选中多个选项,size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性,如 required, disabled, autofocus 等。

还可以将 <option> 元素放在 `` 元素中以为下拉菜单创建不同的选项分组。

4. 参考

创建我的第一个表单

HTML </option></select> 元素

HTML 5 </option><option> 标签

HTML 表单

input中type=hidden



这篇关于HTML_11——表单(3)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程