表单的练习 - - php中文网博客

首页 > 博客列表 > 表单的练习

博主信息

博文 33

粉丝 1

访问量 29019

专题推荐

更多>

表单

<!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>表单</title>
    <style>
      form {
        width: 20%;
        height: auto;
        background-color: lightseagreen;
        margin: 0 auto;
        color: lightyellow;
      }
    </style>
  </head>
  <body>
    <!--  method属性有两个值第一个是post 第二个是get不同的是post密码发送url地址给相应的后台较get安全-->
    <form action="" method="post">
      <!-- for属性值需要与表单的id一致，好处在于可以自动获取光标 -->
      <label for="name">
        <!-- required属性要求用户在提交时必须要填写的而且带有自动表单检查功能 maxlength限制用户输入的字数-->
        名称:<input
          type="text"
          placeholder="用户名"
          name="name"
          id="name"
          required
          maxlength="10"
        />
      </label>
      <p>
        <label for="password">
          <!-- password属性表示密码输入-->
          密码:<input
            type="password"
            placeholder="包括数字和字母"
            name="password"
            id="password"
            required
            maxlength="10" 
          />
        </label>
      </p>
      <p>
        性别：
        <label><input name="remale" type="radio" value="女" />女 </label>
        <label><input name="male" type="radio" value="男" />男 </label>
        <label><input name="maintain" type="radio" value="保密" />保密 </label>
      </p>
      <p>
        <label for="email">邮箱:</label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="要求数字和字母类似123455@qq.com"
          required
        />
      </p>
      <p>
        <label for="search">关键字</label>
        <input type="search" name="search" id="search" list="my_key" />
        <!-- datalist相当于输入框与下拉框select的结合体，可以更易于用户的选择 -->
        <datalist id="my_key">
          <option value="html"></option>
          <option value="javascript"></option>
          <option value="css"></option>
          <option value="boosterap"></option>
        </datalist>
      </p>
      <p style="text-align: center;">
        <button>提交</button>
      </p>
    </form>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：下次配个图

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

flex的属性描述

2021-03-26 18:31:34