search

博客列表 >input表单编写

input表单编写

P粉036614676
P粉036614676原创
2022年10月21日 18:55:22647浏览
  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>表单</title>
  8. </head>
  9. <body>
  10.     <h2>用户注册</h2>
  11.     <form action="form.php" method="post" enctype="application/x-www-form-urlencoded" target="_blank" id="register">
  12.         <fieldset>
  13.             <legend>基本信息</legend>
  14.             <div class="uname">
  15.                 <label for="name">用户名：</label>
  16.                 <input type="text" id="name" placeholder="admin" name="name" required>
  17.             </div>
  19.             <div class="pas">
  20.                 <lable for="password">密码：</lable>
  21.                 <input type="password" name="password" value="123456" id="password" readonly>
  22.                 <submit onclick="change_pas(event)">修改密码</submit>
  23.             </div>
  25.             <div class="email">
  26.                 <label for="email">邮箱</label>
  27.                 <input type="email" name="email" id="email" placeholder="user@email.com">
  28.             </div>
  30.             <div class="age">
  31.                 <label for="age">年龄：</label>
  32.                 <input type="number" name="age" id="age" value="18" min="18" max="80" step="10">
  33.             </div>
  35.             <div class="birthday">
  36.                 <label for="birthday">生日：</label>
  37.                 <input type="date" name="birthday" id="birthday" value="2022.1.1" min="2022.1.1" max="2022.1.6">
  38.             </div>
  40.             <div class="blog">
  41.                 <label for="blog">url地址:</label>
  42.                 <input type="url" name="blog" id="blog" placeholder="http://">
  43.             </div>
  45.             <div class="color">
  46.                 <label for="color">取色器：</label>
  47.                 <input type="color" name="color" id="color" onchange="this" value="#FFFF00">
  48.                 <output>#FFFF00</output>
  49.             </div>
  50.         </fieldset>
  52.         <fieldset>
  53.             <legend>其他信息：</legend>
  54.             <input type="hidden" name="hid" value="2022.1.1">
  55.             <div class="upload">
  56.                 <label for="file">上传照片</label>
  57.                 <input type="file" name="user_pic" id="ipload">
  58.                 <button type="button">上传</button>
  59.             </div>
  61.             <div class="range">
  62.                 <label for="range">星级</label>
  63.                 <input type="range" name="range" id="range" min="0" max="5" value="0" step="1" oninput="getStatus(this)">
  64.                 <output>0</output>星
  65.             </div>
  67.             <div class="progress">
  68.                 <label for="progress">进度</label>
  69.                 <progress name="progress" max="100" value="10"></progress>
  70.             <output>10%</output>
  71.             <button type="button" onclick="handle(this)">+1</button>
  72.         </div>
  73.             </div>
  74.         </fieldset>
  75.     </form>
  76. </body>
  77. </html>
上一条：1021作业 - CSS选择器进阶版和样式美化简单版下一条：css选择器的权重规则
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多