第三课:在编写简单的表单的过程上体验emmet

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

今天主要学习的是emmet的使用和简单表单的制作,下课后主要思考点是,如何用emmet快速来写出一个表单代码来,成品效果如下:

表单成品

基本代码如下:

  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.     <!-- action属性:处理脚本 method:提交方式, -->
  12.     <form action="register.php" method="post">
  13.       <!-- 表单控件分组 -->
  14.       <fieldset style="display: grid; grid-gap: 1em">
  15.         <legend>用户注册</legend>
  16.         <br />
  17.         <div class="uname">
  18.           <label for="uname">用户名:</label>
  19.           <input
  20.             id="uname"
  21.             type="text"
  22.             name="uname"
  23.             placeholder="用户名不得含有特殊字符,总长度不少于6位"
  24.             autofocus
  25.             required
  26.           />
  27.         </div>
  29.         <div class="psw">
  30.           <label for="psw">密码:</label>
  31.           <input
  32.             id="psw"
  33.             type="password"
  34.             name="psw"
  35.             placeholder="密码不少于6位,不得包括特殊字符"
  36.             required
  37.           />
  38.         </div>
  40.         <div class="email">
  41.           <label for="myEmail">邮箱:</label>
  42.           <input
  43.             type="email"
  44.             name="myEmail"
  45.             id="myEmail"
  46.             placeholder="请输入正确的邮箱"
  47.           />
  48.         </div>
  50.         <div class="birthday">
  51.           <label for="birthday">生日:</label>
  52.           <input
  53.             id="birthday"
  54.             value="2022-01-01"
  55.             min="2020-01-01"
  56.             type="date"
  57.           />
  58.         </div>
  60.         <div class="sex">
  61.           <label for="male3">性别</label>
  62.           <input type="radio" name="sex" id="male" value="male" /><label for="male">男</label>
  63.           <input type="radio" name="sex" id="famale" value="famale" /><label for="famale">女</label>
  64.           <input type="radio" name="sex" id="secret" value="secret" checked /><label for="secret">保密</label>
  65.         </div>
  67.         <div class="hobby">
  68.           <label for="">爱好:</label>
  69.           <input type="checkbox" name="hobby[]" value="yuwen" id="yuwen" /><label for="yuwen">语文</label>
  70.           <input type="checkbox" name="hobby[]" value="shuxue" id="shuxue" /><label for="shuxue">数学</label>
  71.           <input type="checkbox" name="hobby[]" value="yingyu" id="yingyu" /><label for="yingyu">英语</label>
  72.         </div>
  74.         <div class="edu">
  75.           <label for="">学历:</label>
  76.           <!-- 下拉列表,从一组预置的值选择一个或多个值 -->
  77.           <!-- 变量的名与值不在同个元素上,name设置以select上,value设置在option上 -->
  78.           <select name="edu" id="">
  79.             <option value="" selected disabled>请选择</option>
  80.             <option value="1">中学</option>
  81.             <option value="2">高中</option>
  82.             <option value="3">大学</option>
  83.           </select>
  84.         </div>
  86.         <button style="width:100px">提交</button>
  87.       </fieldset>
  88.     </form>
  89.   </body>
  90. </html>

除了这些基本代码,我关注的是如何才能写的更快,更对,比如在对sex这一功能的代码上,最终代码要求如下:

  1.         <div class="sex">
  2.           <label for="male3">性别</label>
  3.           <input type="radio" name="sex" id="male" value="male" /><label for="male">男</label>
  4.           <input type="radio" name="sex" id="famale" value="famale" /><label for="famale">女</label>
  5.           <input type="radio" name="sex" id="secret" value="secret" checked /><label for="secret">保密</label>
  6.         </div>
三种Emmet写法比较:1.一步到位:直接输入下面的代码
  1. .sex>label+(inp[type="radio"][name="sex"][value=""][id=""]+label{item})*3

生成的代码没有问题,但我生成的代码是一长长的行,导致后面的编辑特别困难,所以,放弃.

2.分成两批,第一队先生成div和label,第二步用input:radio+label生成单独的radio项,之后通过复制行或多重选择操作,相应代码和快捷键如下:
  1. .sex>label
  2. input:radio+label{item}

快速复制行:shift+alt+上/下
多重选择,用alt+单击
整体感觉比上一个好很多,但还是觉得乱.

3.分成三批,第一层,先div,其次再label,最后再单独两次分别生成input和label,相应代码如下:
  1. .sex
  2. label
  3. inp
  4. radio{男}

最后相比较,还是最后一个看上去步骤多,但写出来的代码既清楚,手写的代码量也最少.

有些时候也许最简单的反而更快.【文章转自：新加坡服务器 http://www.558idc.com/sin.html 复制请保留原URL】
更多阅读