Community Learn Tools Library Leisure
search
English
Home > List of blog posts > input 控件部分的使用效果
Blogger Information
Blog 20
fans 0
comment 0
visits 8634
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
input 控件部分的使用效果
A 管志岗-电商策划
Original
445 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>input_control</title>
  8.   </head>
  9.   <body>
  10.     <form
  11.       action="register.php"
  12.       method="post"
  13.       enctype="application/x-www-form-urlencoded"
  14.       target="_blank"
  15.     >
  16.       <fieldset>
  17.         <legend>注册基本信息</legend>
  18.         <!-- label+input -->
  19.         <!-- type="text" 单行文本，明文 -->
  20.         <!-- ? label 与 input 绑定： label.for == input.id  -->
  21.         <!-- 1.readonly 布尔属性，只读，不能修改，但是能提交
  22.              2.required  必须填 -->
  23.         <!-- disabled: 布尔属性，禁用，只能看，不能改，不能提交 -->
  24.         <div class="username">
  25.           <label for="uname">用户名：</label>
  26.           <input
  27.             type="text"
  28.             value=""
  29.             name="username"
  30.             id="uname"
  31.             placeholder="请输入用户名"
  32.             required
  33.           />
  34.         </div>
  35.         <div class="password">
  36.           <!-- label + input  -->
  37.           <!-- onclick="this.previousElementSibling.type='text'"   -->
  38.           <!-- placeholder 和 value 不能共存，value是默认值，直接显示 -->
  39.           <label for="psw">密码：</label>
  40.           <!-- name + value -->
  41.           <input
  42.             type="password"
  43.             name=""
  44.             id="psw"
  45.             value=""
  46.             required
  47.             placeholder="包含大小写"
  48.           />
  49.           <button onclick="this.previousElementSibling.type='text'">
  50.             显示密码
  51.           </button>
  52.         </div>
  53.         <div class="email">
  54.           <label for="email">邮箱：</label>
  55.           <input
  56.             type="email"
  57.             id="email"
  58.             name="email"
  59.             value=""
  60.             placeholder="user@email.com"
  61.             required
  62.           />
  63.         </div>
  64.         <div class="age">
  65.           <label for="">年龄：</label>
  66.           <!-- 
  67.             * input step="10":步数值，每次递增或者递减 
  68.             * min ：最小
  69.             * max : 最大
  70.         -->
  71.           <input type="number" min="19" max="100" />岁
  72.         </div>
  73.         <!-- type="date" -->
  74.         <div class="birthday">
  75.           <label for="birthday">生日：</label>
  76.           <input
  77.             type="date"
  78.             id="birthday"
  79.             min="1944-01-01"
  80.             max="2200-01-01"
  81.             required
  82.           />
  83.         </div>
  84.         <div class="bolg">
  85.           <label for="blog">填写您的博客：</label>
  86.           <input type="url" name="blog" placeholder="http://" required />
  87.         </div>
  88.         <div class="color">
  89.           <label for="color">选择你的背景颜色：</label>
  90.           <input
  91.             type="color"
  92.             name="color"
  93.             id="color"
  94.             onchange="getColor{this}"
  95.           />
  96.           <output>#f40</output>
  97.         </div>
  98.       </fieldset>
  100.       <button>提交</button>
  101.     </form>
  103.     <!-- JavaScript还没学效果,先引入 -->
  104.     <script src="/"></script>
  105.   </body>
  106. </html>

效果展示

效果展示

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post