Skip to content

Latest commit

 

History

History
300 lines (216 loc) · 9.4 KB

4.md

File metadata and controls

300 lines (216 loc) · 9.4 KB
Raw

第4节 from操作

❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http://nsddd.top

[TOC]

单选按钮radio

radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。

单选按钮是 input 选择框的一种类型。

每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。

下面是一个单选按钮的例子：

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>

最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。 例如：

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>

我们也可以在 label 标签中嵌入 input 元素：

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

在表格中添加一对单选按钮，每个按钮嵌套在自己的 label 元素中。 一个选项应该是 indoor ，另一个选项应该是 outdoor。 两个按钮的 name 属性都是 indoor-outdoor，以创建一组单选按钮。

代码实现

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

关键代码

<label for="indoor">
    <input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>

<label for="outdoor">
    <input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>

页面效果

image-20220917163630130

单选实战

<!--
 * @Description: 单选按钮
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-22 22:02:30
 * @LastEditTime: 2022-09-22 22:05:12
 * @FilePath: \html\表单标签.html
 * @blog: https://nsddd.top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>表单进阶 -- 单选框</h1>
    <div>你对京东的满意度</div>
    <div>
        <input type = "radio" name = "a">满意
    </div>
    <div>
        <input type = "radio" name = "a">非常满意
    </div>
    <div>
        <input type = "radio" name = "a">挺满意
    </div>
    <div>
        <input type = "radio" name = "a">还好满意
    </div>
    <div>
        <input type = "radio" name = "a">不满意
    </div>
</body>
</html>

复选按钮checkboxes

checkboxes（复选框）就好比多项选择题，正确答案有多个。

复选框是 input 选择框的一种类型。

每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的复选框应该拥有相同的 name 属性。

使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。

下面是一个复选框的例子：

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

请给表单添加三个复选框， 每个复选框都被嵌套进 label 元素中。 并且它们的 name 属性均为 personality。

代码

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>
     <br>
    <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
    <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
    <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label>
     <br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

关键代码

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>

使用单选框和复选框的value属性

提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。

例如：

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。

如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中 "indoor" 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。

给每一个 radio 和 checkbox 输入框添加 value 属性。 不要创建任何新的 radio 或 checkbox 元素。 输入框标签文本使用小写字母作为属性值。

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

关键代码

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>

给单选按钮和复选按钮设置默认值

用 checked 属性把第一个复选框和单选按钮都设置为默认选中。

为此，只需将单词 checked 添加到 input 元素的内部。 例如:

<input type="radio" name="test-name" checked>

END 链接