表单

  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.     <style>
  9.       form {
  10.         width: 20%;
  11.         height: auto;
  12.         background-color: lightseagreen;
  13.         margin: 0 auto;
  14.         color: lightyellow;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <!--  method属性有两个值第一个是post 第二个是get不同的是post密码发送url地址给相应的后台较get安全-->
  20.     <form action="" method="post">
  21.       <!-- for属性值需要与表单的id一致，好处在于可以自动获取光标 -->
  22.       <label for="name">
  23.         <!-- required属性要求用户在提交时必须要填写的而且带有自动表单检查功能 maxlength限制用户输入的字数-->
  24.         名称:<input
  25.           type="text"
  26.           placeholder="用户名"
  27.           name="name"
  28.           id="name"
  29.           required
  30.           maxlength="10"
  31.         />
  32.       </label>
  33.       <p>
  34.         <label for="password">
  35.           <!-- password属性表示密码输入-->
  36.           密码:<input
  37.             type="password"
  38.             placeholder="包括数字和字母"
  39.             name="password"
  40.             id="password"
  41.             required
  42.             maxlength="10" 
  43.           />
  44.         </label>
  45.       </p>
  46.       <p>
  47.         性别：
  48.         <label><input name="remale" type="radio" value="女" />女 </label>
  49.         <label><input name="male" type="radio" value="男" />男 </label>
  50.         <label><input name="maintain" type="radio" value="保密" />保密 </label>
  51.       </p>
  52.       <p>
  53.         <label for="email">邮箱:</label>
  54.         <input
  55.           type="email"
  56.           id="email"
  57.           name="email"
  58.           placeholder="要求数字和字母类似123455@qq.com"
  59.           required
  60.         />
  61.       </p>
  62.       <p>
  63.         <label for="search">关键字</label>
  64.         <input type="search" name="search" id="search" list="my_key" />
  65.         <!-- datalist相当于输入框与下拉框select的结合体，可以更易于用户的选择 -->
  66.         <datalist id="my_key">
  67.           <option value="html"></option>
  68.           <option value="javascript"></option>
  69.           <option value="css"></option>
  70.           <option value="boosterap"></option>
  71.         </datalist>
  72.       </p>
  73.       <p style="text-align: center;">
  74.         <button>提交</button>
  75.       </p>
  76.     </form>
  77.   </body>
  78. </html>

更多相关文章

  1. 制作表格和表单提交
  2. 学生课程表表格/用户注册表单
  3. html基础：制作简单的表格与表单
  4. 9.1java_面向对象之封装(类与对象)
  5. 前端插件：form.js和validate.js的简单入门使用
  6. 流程图控件GoJS类别索引之类装饰
  7. HTML5画布如何设置线的样式？
  8. JavaScript变量中你不知道的几个小埋伏！
  9. JS变量中你不知道的小埋伏

随机推荐

  1. PHP中__invoke()方法详解
  2. 编译安装 ProtoBuf 扩展
  3. PHP 数据加密的方法
  4. TP5.0 PHPExcel 数据表格导出导入
  5. PHP识别相片是否是颠倒的，并且重新摆正相
  6. 避坑！用 Docker 搞定 PHP 开发环境搭建
  7. php开发常见问题总结
  8. PHP中的进制转换
  9. PHP中关于trait使用方法的详细介绍
  10. PHP 代码优化 技巧总结