input 控件部分的使用效果 - 作业

首页 > 博客列表 > input 控件部分的使用效果

博主信息

博文 20

粉丝 0

访问量 14217

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

input 控件部分的使用效果

A 管志岗-电商策划

原创

668人浏览过

<!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>input_control</title>
  </head>
  <body>
    <form
      action="register.php"
      method="post"
      enctype="application/x-www-form-urlencoded"
      target="_blank"
    >
      <fieldset>
        <legend>注册基本信息</legend>
        <!-- label+input -->
        <!-- type="text" 单行文本，明文 -->
        <!-- ? label 与 input 绑定： label.for == input.id  -->
        <!-- 1.readonly 布尔属性，只读，不能修改，但是能提交
             2.required  必须填 -->
        <!-- disabled: 布尔属性，禁用，只能看，不能改，不能提交 -->
        <div class="username">
          <label for="uname">用户名：</label>
          <input
            type="text"
            value=""
            name="username"
            id="uname"
            placeholder="请输入用户名"
            required
          />
        </div>
        <div class="password">
          <!-- label + input  -->
          <!-- onclick="this.previousElementSibling.type='text'"   -->
          <!-- placeholder 和 value 不能共存，value是默认值，直接显示 -->
          <label for="psw">密码：</label>
          <!-- name + value -->
          <input
            type="password"
            name=""
            id="psw"
            value=""
            required
            placeholder="包含大小写"
          />
          <button onclick="this.previousElementSibling.type='text'">
            显示密码
          </button>
        </div>
        <div class="email">
          <label for="email">邮箱：</label>
          <input
            type="email"
            id="email"
            name="email"
            value=""
            placeholder="user@email.com"
            required
          />
        </div>
        <div class="age">
          <label for="">年龄：</label>
          <!-- 
            * input step="10":步数值，每次递增或者递减 
            * min ：最小
            * max : 最大
        -->
          <input type="number" min="19" max="100" />岁
        </div>
        <!-- type="date" -->
        <div class="birthday">
          <label for="birthday">生日：</label>
          <input
            type="date"
            id="birthday"
            min="1944-01-01"
            max="2200-01-01"
            required
          />
        </div>
        <div class="bolg">
          <label for="blog">填写您的博客：</label>
          <input type="url" name="blog" placeholder="http://" required />
        </div>
        <div class="color">
          <label for="color">选择你的背景颜色：</label>
          <input
            type="color"
            name="color"
            id="color"
            onchange="getColor{this}"
          />
          <output>#f40</output>
        </div>
      </fieldset>
      <button>提交</button>
    </form>
    <!-- JavaScript还没学效果,先引入 -->
    <script src="/"></script>
  </body>
</html>

效果展示

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

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

0条评论

作者最新博文

input 控件部分的使用效果

2022-10-19 13:39:29