简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实战简单的注册表单以及选择器的认识
Blogger Information
Blog 8
fans 1
comment 0
visits 6715
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
实战简单的注册表单以及选择器的认识
JOAblog
Original
597 people have browsed it

实战简单的注册表单以及选择器的认识

简单的注册表单实战

第一步创建一个html文件，确定我们需要的注册内容

这里以常用的注册用户名 注册密码 注册邮箱 注册性别 兴趣爱好 为例

1，首先创建一个基础的框架fieldset：

图示：

代码实现：

  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.     <fieldset>
  11.       <legend>用户注册表单</legend>
  12.       <div>注册用户名</div>
  13.       <div>注册密码</div>
  14.       <div>注册邮箱</div>
  15.       <div>注册性别</div>
  16.       <div>兴趣爱好</div>
  17.     </fieldset>
  18.   </body>
  19. </html>
2，利用label+input控件实现每一项的功能

其中input的type属性对输入的内容会有一些预设的值
比如注册用户名我们只需要用到默认的text文本值，而密码需要用的是password内置值，邮箱需要用到email内置值，不同的type内置值可以参考html手册

图示：

代码实现：

  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.     <fieldset>
  11.       <legend>用户注册表单</legend>
  12.       <div>
  13.         <label for="name">注册用户名：<input type="text" /></label>
  14.       </div>
  15.       <div>
  16.         <label for="password">注册密码：<input type="password" /></label>
  17.       </div>
  18.       <div>
  19.         <label for="email">注册邮箱：<input type="email" /></label>
  20.       </div>
  21.       <div>
  22.         <label for="sex">注册性别：<input type="radio" /></label>
  23.       </div>
  24.       <div>
  25.         <label for="love">兴趣爱好：<input type="checkbox" /></label>
  26.       </div>
  27.     </fieldset>
  28.   </body>
  29. </html>

这个样子看着是比较丑，我们在通过各种内置属性修改美化一下，大家可以参考一下html手册
我这里修改的最终版是这样的，加了两个按钮就更像样了。
图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <fieldset>
  11.       <legend>用户注册</legend>
  12.       <form action="#" method="get">
  13.         <div>
  14.           <label for="name"
  15.             >注册用户：<input
  16.               type="text"
  17.               name="name"
  18.               id="name"
  19.               autofocus
  20.               required
  21.               placeholder="请输入用户名" /></label
  22.           ><br />
  23.           <label for="password"
  24.             >注册密码：
  25.             <input
  26.               type="password"
  27.               name="password"
  28.               id="password"
  29.               required
  30.               placeholder="请输入密码" /></label
  31.           ><br />
  32.           <label for="email"
  33.             >注册邮箱：
  34.             <input
  35.               type="email"
  36.               name="email"
  37.               id="email"
  38.               placeholder="joa@qq.com"
  39.             /> </label
  40.           ><br />
  41.           <label for="whatmen"
  42.             >身份性别： <input type="radio" name="xb" id="men" />男
  43.             <input type="radio" name="xb" id="women" />女
  44.             <input type="radio" name="xb" id="whatmen" checked />保密 </label
  45.           ><br />
  46.           <label for="love"
  47.             >兴趣爱好:
  48.             <input type="checkbox" name="love" id="game" checked />游戏
  49.             <input type="checkbox" name="love" id="lookmov" checked />看电影
  50.             <input type="checkbox" name="love" id="ganfanr" />吃饭人
  51.             <input type="checkbox" name="love" id="gogogo" />跑步 </label
  52.           ><br />
  53.           <button>注册</button>
  54.           <button>登录</button>
  55.         </div>
  56.       </form>
  57.     </fieldset>
  58.   </body>
  59. </html>

选择器的简单认识

基础选择器

1.标签选择器

利用标签选择器选择li标签的内容并更改背景色

图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     li {
  11.       background-color: blue; /*利用标签选择器选择Li标签并添加背景色蓝色*/
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <div>这是未选中的div标签内容</div>
  17.       <li>这是选中的Li标签内容</li>
  18.       <li>这是选中的Li标签内容</li>
  19.       <li>这是选中的Li标签内容</li>
  20.     </ul>
  21.   </body>
  22. </html>

2.元素选择器

利用元素选择器选择ID为xzid的li标签并更改背景色为红色，利用元素选择器选择class为xzclass的li标签并更改背景色为绿色

图示

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     li[id="xzid"] {
  11.       background-color: red; /*利用元素选择器选择ID为`xzid`的li标签并更改背景色为红色*/
  12.     }
  13.     /* 或者
  14.     li#xzid{
  15.         background-color: red;
  17.     } */
  18.     li[class="xzclass"] {
  19.       background-color: green; /*利用元素选择器选择class为`xzclass`的li标签并更改背景色为绿色*/
  20.     }
  21.     /* 或者
  22.     li.class{
  23.         background-color: green;
  24.     }*/
  25.   </style>
  26.   <body>
  27.     <ul>
  28.       <li id="xzid">这是选中ID为'xzid'的Li标签内容</li>
  29.       <li id="bxzid">这是未选中ID为‘buzid’的Li标签内容</li>
  30.       <li class="xzclass">这是选中CLASS为'xzclass'的Li标签内容</li>
  31.       <li class="bxzclass">这是未选中class为'bxzclass'的li标签内容</li>
  32.     </ul>
  33.   </body>
  34. </html>
!注意：优先级排序为ID>class>tag

上下文选择器

1.后代选择器空格（选中所有ul标签的子孙后代）
图示：

代码示例：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     ul li {
  11.       background-color: greenyellow; /*后代选择器，选择所有ul标签的后代并更改背景色为浅绿色*/
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <li>后代儿子</li>
  17.       <li>
  18.         后代儿子
  19.         <ul>
  20.           <li>后代孙子</li>
  21.           <li>后代孙子</li>
  22.           <li>后代孙子</li>
  23.         </ul>
  24.       </li>
  25.       <li>后代儿子</li>
  26.     </ul>
  27.   </body>
  28. </html>

2，子选择器>(选中所有ul标签的儿子不选中孙子级别)
图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     ul li {
  11.       background-color: indianred; /*后代选择器，选择所有ul标签的后代并更改背景色为粉色*/
  12.     }
  13.     body > ul > li {
  14.       background-color: yellow; /*子选择器，选择ul标签的子代标签并更改背景色为黄色*/
  15.     }
  16.   </style>
  17.   <body>
  18.     <ul>
  19.       <li>后代儿子</li>
  20.       <li>
  21.         后代儿子
  22.         <ul>
  23.           <li>后代孙子</li>
  24.           <li>后代孙子</li>
  25.           <li>后代孙子</li>
  26.         </ul>
  27.       </li>
  28.       <li>后代儿子</li>
  29.     </ul>
  30.   </body>
  31. </html>

3.同级相邻选择器+(选择与class属性为class的标签相邻的一个标签)
图示:

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     .class + li {
  11.       background-color: yellowgreen;
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <li>后代儿子</li>
  17.       <li>后代儿子</li>
  19.       <li>后代儿子</li>
  20.       <li class="class">选择属性的标签</li>
  21.       <li>相邻的标签</li>
  23.       <li>后代儿子</li>
  24.     </ul>
  25.   </body>
  26. </html>

4.同级所有选择器~(选择与class属性为class的标签相邻同级的素有标签)
图示：

代码实现：

  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>Document</title>
  8.   </head>
  9.   <style>
  10.     .class ~ li {
  11.       background-color: yellowgreen;
  12.     }
  13.   </style>
  14.   <body>
  15.     <ul>
  16.       <li>后代儿子</li>
  17.       <li>后代儿子</li>
  19.       <li>后代儿子</li>
  20.       <li class="class">选择属性的标签</li>
  21.       <li>相邻的所有标签</li>
  23.       <li>相邻的所有标签</li>
  24.     </ul>
  25.   </body>
  26. </html>

> 文章的一些细节没有进行描述，标签元素参考html手册不懂的可以留言，我会了解后给你解释的喔~joa，天天爱学习。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！