简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Emmet语法与注册表单课程作业

Emmet语法与注册表单课程作业

张金明学PHP
张金明学PHP原创
2023年03月15日 13:40:32250浏览

Emmet语法 与 注册表单课程作业

通过今天的学习,我学到了以下内容

1. Emmet 语法

  1. 1:创建html5 结构使用 ! 2:创建文本 h3.title{hello 张金明} 对应的文本是:
  2. <h3 class="titte">hello 张金明</h3>
  3. 3:创建带有属性的文本 属性处用[]括住后填写在里面 举例:h3[title]{hello 张金明}
  4. 对应的文本是:
  5. <h3 class="title">hello 张金明</h3>
  6. 4:高频属性:id class的写法 实例:id="hello 张金明" === [id="hello 张金明"] ===
  7. #hello 张金明 class="hello 张金明" === [class="hello 张金明"]=== .hello 张金明
  8. 5:重复内容 使用* 举例: tr*3 得出
  9. <tr></tr>
  10. <tr></tr>
  11. <tr></tr>
  12. 加上内容:tr*3{hello 张金明} 得出
  13. <tr>
  14.   hello 张金明
  15. </tr>
  16. <tr>
  17.   hello 张金明
  18. </tr>
  19. <tr>
  20.   hello 张金明
  21. </tr>
  22. 6:写个导航 举例:ul.nav>li.time*2>a{张金明} 得出
  23. <ul class="nav">
  24.   <li class="time"><a href="">张金明</a></li>
  25.   <li class="time"><a href="">张金明</a></li>
  26. </ul>

2.注册表单

  1. 1.form.method方式为设置提交方式,默认为get类型,常规情况下带有账号密码及敏感数据的,需使用post类型.
  2. 2.form.action 意思是提交给服务器处理的数据脚本文件.
  3. 3.如果想实现点击表单外的文字,鼠标光标能自动跳到输入框内,需要绑定fro的id,具体写法为在input内增加id=""属性,且id属性需要与for内的属性一致.
  4. 其中autofocus 设置在谁的后面,就是意味着当网页刷新后光标自动落到那一行.
  5. 4.在input.type中 -账号输入 `text`为明文输入; 示例:
  6. <div class="username">
  7.   <label for="uname">用户名:</label>
  8.   <input
  9.     type="test"
  10.     id="uname"
  11.     name="uname"
  12.     placeholder="大写+小写+数字的8位组合"
  13.     autofocus
  14.   />
  15. </div>
  17. -密码输入 `password`为密文输入; 示例:
  18. <div class="psw">
  19.   <label for="psw">密码:</label>
  20.   <input type="password" id="psw" name="password" />
  21. </div>
  23. -邮箱输入 `email`为邮箱(验证); 示例:
  24. <div class="email">
  25.   <label for="email">邮箱:</label>
  26.   <input type="email" id="email" email="email" placeholder="user@126.com" />
  27. </div>
  29. -日期输入 `date`为日期控件;
  30. <div class="birthday">
  31.   <label for="bir">生日</label>
  32.   <input
  33.     type="date"
  34.     id="sbirthday"
  35.     name="birthday"
  36.     value="2008-10-08"
  37.     min="2007-08-09"
  38.     max="2023-08-08"
  39.   />
  40. </div>
  42. -数字输入 `number`为数字输入; `min`为最小数字限制;
  43. `max`为最大数字限制;`value`默认值; 示例:
  44. <div class="age">
  45.   <label for="age">年龄:</label>
  46.   <input type="number" id="age" name="age" min="18" max="80" value="19" />岁
  47. </div>
  49. -单选框 `radio`为单选框属性; `checked`
  50. 为单选框中的默认选中属性在`input.type.radio`中
  51. `name`属性是提交到服务器上的变量名,只有全部相同,才能保证单选按钮属性的唯一性.
  52. 示例:
  53. <div class="sex">
  54.   <label for="male">性别:</label>
  55.   <input type="radio" name="sex" value="male" id="male" /><label for="male"
  56.     >男</label
  57.   >
  58.   <input type="radio" name="sex" value="famale" id="famale" /><label
  59.     for="famale"
  60.     >女</label
  61.   ><input type="radio" name="sex" value="bm" id="bm" checked /><label
  62.     for="famale"
  63.     >保密</label
  64.   >
  65. </div>
  67. -多选框 `checkbox`为多选框属性 在`input.type.checkbox`中
  68. name属性可以相同,但需加[]数组标识符号,不然传输到服务器上就是只有一个属性. 示例:
  69. <div class="hobby">
  70.   <label>爱好</label>
  71.   <input
  72.     checked
  73.     type="checkbox"
  74.     name="hobby[]"
  75.     value="lvyou"
  76.     id="lvyou"
  77.   /><label for="lvyou">旅游</label>
  78.   <input type="checkbox" name="hobby[]" value="dushu" id="dushu" /><label
  79.     for="dushu"
  80.     >读书</label
  81.   >
  82.   <input type="checkbox" name="hobby[]" value="banzhuan" id="banzhuan" /><label
  83.     for="banzhuan"
  84.     >搬砖</label
  85.   >
  86. </div>
  88. -下拉列表 `edu`为下拉列表属性 `option`为下来列表属性值 `selected`是下拉列表中的默认选择项;`disabled`是下拉列表中的禁用属性
  89. 示例:
  90. <div class="edu">
  91.           <label for="">学历</label>
  92.           <select name="edu" id="">
  93.             <option value="" selected disabled>请选择就读学校</option></option>
  94.             <option value="1">张庄小学</option></option>
  95.             <option value="2">南顿四中</option></option>
  96.             <option value="3">项城二高</option></option>
  97.           </select>
  98.         </div>

3.注册表单作业

  • 作业源码
  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.     <form action="zhuc.php" method="post">
  11.       <fieldset style="display: inline-grid; gap: 1em">
  12.         <legend>新用户注册</legend>
  13.         <div class="username">
  14.           <label for="uname">用户名:</label
  15.           ><input
  16.             type="test"
  17.             id="uname"
  18.             name="uname"
  19.             placeholder="大写+小写+数字的8位组合"
  20.             autofocus
  21.           />
  22.         </div>
  23.         <div class="email">
  24.           <label for="email">邮箱:</label>
  25.           <input
  26.             type="email"
  27.             id="email"
  28.             email="email"
  29.             placeholder="user@126.com"
  30.           />
  31.         </div>
  32.         <div class="psw">
  33.           <label for="psw">密码:</label>
  34.           <input type="password" id="psw" name="password" />
  35.         </div>
  36.         <div class="age">
  37.           <label for="age">年龄:</label>
  38.           <input
  39.             type="number"
  40.             id="age"
  41.             name="age"
  42.             min="18"
  43.             max="80"
  44.             value="19"
  45.           />岁
  46.         </div>
  47.         <div class="birthday">
  48.           <label for="bir">生日</label>
  49.           <input
  50.             type="date"
  51.             id="sbirthday"
  52.             name="birthday"
  53.             value="2008-10-08"
  54.             min="2007-08-09"
  55.             max="2023-08-08"
  56.           />
  57.         </div>
  58.         <div class="sex">
  59.           <label for="male">性别:</label>
  60.           <input type="radio" name="sex" value="male" id="male" /><label
  61.             for="male"
  62.             >男</label
  63.           >
  64.           <input type="radio" name="sex" value="famale" id="famale" /><label
  65.             for="famale"
  66.             >女</label
  67.           ><input type="radio" name="sex" value="bm" id="bm" checked /><label
  68.             for="famale"
  69.             >保密</label
  70.           >
  71.         </div>
  72.         <div class="hobby">
  73.           <label>爱好</label>
  74.           <input
  75.             checked
  76.             type="checkbox"
  77.             name="hobby[]"
  78.             value="lvyou"
  79.             id="lvyou"
  80.           /><label for="lvyou">旅游</label>
  81.           <input
  82.             type="checkbox"
  83.             name="hobby[]"
  84.             value="dushu"
  85.             id="dushu"
  86.           /><label for="dushu">读书</label>
  87.           <input
  88.             type="checkbox"
  89.             name="hobby[]"
  90.             value="banzhuan"
  91.             id="banzhuan"
  92.           /><label for="banzhuan">搬砖</label>
  93.           <!-- <input type="checkbox" name="hobby" value="lvyou" id="lsvyou"><label for="lvyou">旅游</label> -->
  94.         </div>
  95.         <div class="edu">
  96.           <label for="">学历</label>
  97.           <select name="edu" id="">
  98.             <option value="" selected disabled>请选择就读学校</option></option>
  99.             <option value="1">张庄小学</option></option>
  100.             <option value="2">南顿四中</option></option>
  101.             <option value="3">项城二高</option></option>
  102.           </select>
  103.         </div>
  104.         <button>提交注册</button>
  105.       </fieldset>
  106.     </form>
  107.   </body>
  108. </html>
  • 作业效果图

作业出处:张金明的 blog

今日心情:店里的门头被我接错变压器 烧掉了,等待换货中~
今日天气:大风吹
授业老师:PHP 中文网:朱老师

上一条：C#滑动拼图验证码实现笔记下一条：【记】滑动拼图验证码在搜索中的作用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多