单选框和复选框

单选框：

<label> <input type="radio" name="gender" value="male" />男 label>
<label> <input type="radio" name="gender" value="female" />女 label>

 另一种写法：

<input id="male" type="radio" name="gender" value="male" />
<label for="male">男label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女label>

复选框：

<label> <input type="checkbox" name="interest" value="coding" />编程 label>
<label> <input type="checkbox" name="interest" value="other" />其他 label>

 需要注意的是：复选框是只有2种状态的表单控件：已选中或未选中。在只有一个复选框的情况下，它允许用户对某事说“是”或“否”，比如同意或不同意某个条款。而只有一个单选框的情况下，用户一旦选择了这个单选框，就不能再取消选择了，除非他刷新了网页~

例1：单选框：你喜欢旅游吗？

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <form action="https://www.youkeda.com/">
    <p>你喜欢旅游吗？p>

    <input type="radio" name="travel" value="agree" id="agree" />
    <label for="agree">喜欢label>

    <input type="radio" name="travel" value="neutral" id="neutral" />
    <label for="neutral">无所谓label>

    <input type="radio" name="travel" value="disagree" id="disagree" />
    <label for="disagree">不喜欢label>
  form>
body>
html>

 例2：

  下面是一道单选题的四个选项，请把这四个选项用单选框写出来，要求：用label标签的for属性和input的id属性对应的方式，实现点击文字也能选中对应的选项的功能。

A、form 标签是块状标签
B、form 标签内可以写输入框之类的表单控件
C、form 标签可嵌套在 form 标签内
D、表单中的内容可以被提交到 action 属性定义的地址去
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>编程题title>
  head>
  <body>
    <form action="https://www.youkeda.com/">
      <input type="radio" name="form" value="A" id="form-a" />
      <label for="form-a">A、form标签是块状标签label>

      <input type="radio" name="form" value="B" id="form-b" />
      <label for="form-b">B、form标签内可以写输入框之类的表单控件label>

      <input type="radio" name="form" value="C" id="form-c" />
      <label for="form-c">C、form标签可嵌套在form标签内label>

      <input type="radio" name="form" value="D" id="form-d" />
      <label for="form-d">D、表单中的内容可以被提交到action属性定义的地址去label>
    form>
  body>
html>

 有时我们在注册账号的时候需要勾选一些条款：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>编程题title>
head>
<body>
  <form action="https://www.youkeda.com/">
<label><input type="checkbox" name="slect" value="select" />我已阅读并同意相关服务条款和隐私政策label>
  form>
body>
html>

Web前端语言学习

相关

标签