Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 第三课:在编写简单的表单的过程上体验emmet
Blogger Information
Blog 12
fans 0
comment 0
visits 7788
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
第三课:在编写简单的表单的过程上体验emmet
屈世明
Original
514 people have browsed it

今天主要学习的是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{男}

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

有些时候也许最简单的反而更快.

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