--表单入门--

表单的格式为lable+input，input内type设置不同的类型

text普通为本框 eamil邮件 password密码 date日期 number数字
<input type="text">
label 里的for的值必须是input内ID的值,才能进行绑定
<lable for="abc">内容</lable><input type="date" id="abc">

    <title>表单</title>
  </head>
  <body>
    <!-- action表示表单信息要传递到的文件 -->
    <!-- method表示传递的方式是POST"密文传送"或者GET"明文传送" -->
    //表示初始化时光标自动在这个文本框内
    <!-- required: 必填项, 不写不能提交 -->
    <form action="phpcn.php" method="post">
      <fieldset style="display: inline-grid; gap: 1em">
        <legend>新用户注册</legend>
        <!-- label 里的for的值必须是input内ID的值,才能进行绑定 -->
      <div class="user">
        <label for="user">用户名</label>
        <!-- type的值 text 为普通文本框 -->
        <input
          type="text"
          id="user"
          name="user"
          placeholder="文本输入框内显示"
          autofocus
          required
        />
      </div>
      <div class="email">
        <label for="email">邮箱</label>
        <!-- type的值为eamil时为邮箱类型.再提交的时候会进行邮箱的格式验证 -->
        <input
          type="email"
          id="email"
          name="email"
          placeholder="邮箱输入框内显示"
          required
        />
      </div>
      <div class="psw">
        <label for="psw">密码</label>
        <!-- type 的值为password时为密码类型.输入的时候会以“·”显示 -->
        <input
          type="password"
          id="psw"
          name="psw"
          required
          />
      <div class="chusheng">
        <label for="chusheng">出生年月</label>
        <!-- type的值为date时为日期格式。 -->
        <!-- value的值为默认的数据，也会在页面初始化的时候显示出来 -->
        <input
          type="date"
          id="chusheng"
          value="2000-01-01"
          name="chusheng"
          min="1999-12-12"
          />
      </div>
      <div class="sex">
         <!-- input.value === input.id === label.for  -->
         <!-- checked: 布尔属性, 默认选中 -->
          <!-- input.type.radio中的 input.name 必须全部相同,因为name是提交互服务器上的变量名 -->
          <!-- 只有全部相同,才能保证数据的唯一性 -->
          <!-- name=male,female, secret, male, 以最后你选择的那个值为准,只保留一个 -->
        <label for="nan">性别</label>
        <input type="radio" name="sex" value="nan" id="nan" checked ><label for="nan">男</label>
        <input type="radio" name="sex" value="nv" id="nv"  ><label for="nv">女</label>
        <input type="radio" name="sex" value="mi" id="mi"  ><label for="mi">保密</label>
      </div>
      <div class="hobby">
        <label for="">多选</label>
        <input type="checkbox"name="hobby[]" value="aa" id="aa"><label for="aa">aa</label>
        <input type="checkbox"name="hobby[]" value="bb" id="bb"><label for="bb">bb</label>
        <input type="checkbox"name="hobby[]" value="cc" id="cc"><label for="cc">cc</label>
        <input type="checkbox"name="hobby[]" value="dd" id="dd"><label for="dd">dd</label>
      </div>
      <div class="edu">
          <label for="">学历:</label>
          <!-- 下拉列表: 从一组预置的值选择一个或多个返回 -->
          <!-- 所以,变量的名称与值不在同一个元素上 -->
          <!-- name=uname, value=admin
          uname = admin
          都声明在 input 一个元素上,名值必须绑定到一个元素上input  -->
          <!-- <input type="text" name="uname" value="admin" /> -->
          <!-- name 和 value 不在一个元素上 -->
          <!-- select.name  -->
          <!-- option.value -->
          <select name="edu" id="">
            <!-- 提示的制作方式 -->
            <!-- <option value="" selected disabled>--请选择--</option> -->
            <option value="1">中学</option>
            <!-- selected: 默认选中  -->
            <option value="2" selected>大学</option>
            <option value="2">大学</option>
            <option value="3">博士</option>
          </select>
        </div>
    </fieldset>
      <button>提交</button>
    </form>
  </body>
</html>
表单的格式为lable+input，input内type设置不同的类型

相关文章
