表单

表单在网页中十分常见, 像我们的注册页面, 用户登录页面,天天使用的搜索栏.它们都是一些常见的表单.表单的作用就是上传用户的数据,服务通过表单接受的数据,并为用户提供相应的服务.

表单标签

  1. form标签:一般情况下表单项要放在 FORM 内提交.
    form属性:
属性说明
action后台地址
method提交方式 GET 或 POST

2.label 用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的.

3.input文本框用于输入单行文本使用，下面是常用属性与示例:

属性说明
type表单类型默认为 text
name后台接收字段名
required必须输入
placeholder提示文本内容
value默认值
maxlength允许最大输入字符数
size表单显示长度，一般用不使用而用 css 控制
disabled禁止使用，不可以提交到后台
readonly只读，可提交到后台

通过设置表单的type字段可以指定不同的输入内容。

类型说明
email输入内容为邮箱
url输入内容为URL地址
password输入内容为密码项
tel电话号移动端会调出数字键盘
search搜索框
hidden隐藏表单
submit提交表单

4.select下拉列表项可用于多个值中的选择.

选项说明
multiple支持多选
size列表框高度
optgroup选项组
selected选中状态
option选项值

5.radio单选框指只能选择一个选项的表单，如性别的选择男、女、保密 只能选择一个

选项说明
checked选中状态

6.checkbox复选框指允许选择多个值的表单。

7.datalist input表单的输入值选项列表.

  1. <form action="" method="post">
  2.   <input type="text" list="lesson">
  3.   <datalist id="lesson">
  4.     <option value="PHP">后台管理语言</option>
  5.     <option value="CSS">美化网站页面</option>
  6.     <option value="MYSQL">掌握数据库使用</option>
  7.   </datalist>
  8. </form>

表单联系

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="keywords" contetn="Test Login">
  6.         <meta name="description" content="User Login">
  7.         <title>Login</title>
  8.         <style>
  9.             h3 {
  10.                 color: red;
  11.                 text-align: center;
  12.             }
  13.             div{
  14.                 margin:10px auto;
  15.             }
  16.             div button {
  17.                 background-color: blue; 
  18.                 color: red;           
  19.             }
  20.             /*兄弟选择器*/
  21.             label+input {
  22.                border-radius: 10px;
  23.                border: solid 2px ; 
  24.             }
  25.             /*父子选择器*/
  26.             div>label {
  27.                 font-size: 20px            
  28.             }
  30.             input[id="user"],input[id="passwd"] {
  31.                 width: 300px; 
  32.                 margin: 0 auto;           
  33.             }
  35.             #label-game {
  36.                 color: yellow;            
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <h3>用户注册</h3>
  42.         <div>
  43.             <form action="#" method="POST">
  44.                <fieldset>
  45.                     <legend>必填信息</legend>
  46.                     <div>
  47.                         <label for="user">账号: </label> <input type="text" placeholder="填入账号" required id="user" name="ID" />
  48.                     </div>
  49.                     <div>
  50.                         <label for="passwd">密码: </label> <input type="password" placeholder="填入密码" required id="passwd" name="PWS" />
  51.                     </div>
  52.                     <div>
  53.                         <label for="female">性别</label>
  54.                         <label for="male">男:</label> <input type="radio"  id="male" value="meal" name="gender" />
  55.                         <label for="female">女:</label> <input type="radio" id="female" value="female" name="gender"/>
  56.                     </div>
  57.                     <div>
  58.                         <label for="hobby[]">爱好:<label>
  59.                         <label for="football">足球</label> <input type="checkbox" id="football" value="football"/>
  60.                         <label for="game" id="label-game">游戏</label> <input type="checkbox" id="game" value="game"></input>
  61.                     </div>
  62.                     <div>
  63.                         <label for>会员选择:</label> <input type="text" required list="vip"/>
  64.                         <datalist id="vip">
  65.                             <option value="vip1">白金会员</option>
  66.                             <option value="vip2">砖石会员</option>
  67.                             <option value="vip3">镀金会员</option>
  68.                         </datalist>
  69.                     </div>
  70.                     <div>
  71.                         <label>课程选择:</label>
  72.                          <select name="lesson">
  73.                             <option value="">===课程===</option>
  74.                             <optgroup label="后端课程">
  75.                                 <option value="PHP">PHP</option>
  76.                                 <option value="JAVA">JAVA</option>
  77.                                 <option value="Node.js">Node.js</option>
  78.                             </optgroup>
  79.                             <optgroup label="前端课程">
  80.                                 <option value="HTML">HTML</option>
  81.                                 <option value="CSS">CSS</option>
  82.                                 <option value="JavaScript">JavaScript</option>
  83.                             </optgroup>
  84.                          </select>
  85.                     </div>
  86.                     <div>
  87.                         <label for="signature">个性签名:</label>
  88.                         <textarea id="signature" name="content" cols="40" rows="1"></textarea>
  89.                     </div>
  90.                     <div>
  91.                         <button type="submit">提交</button>
  92.                     </div>
  93.                </fieldset> 
  94.             </form>
  95.         </div>
  96.     </body>
  97. </html>

效果图

常用选择器

选择器示例描述
.class.intro选择 class=”intro” 的所有元素
#id#firstname选择 id=”firstname” 的所有元素
**选择所有元素
elementp选择所有元素
elementA,elementBdiv,p选择所有elementA和所有element
elementA elementBdiv p选择elementA内部的所有elementB
elementA>elementBdiv>p选择父元素:elementA的所有子元素elementB
elementA+elementBdiv+p选择紧接在elementA之后的elementB元素

实战

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>Test</title>
  6.         <style>
  7.             /*元素选择器*/
  8.             h3 {
  9.                 color: red;            
  10.             }
  11.             /*id选择器*/
  12.             #span_1 {
  13.                 background-color: blue;
  14.             }
  15.             /*class选择器*/
  16.             .span_2 {
  17.                 color: yellow;            
  18.             }
  19.             /*父子选择器*/
  20.             ul>li {
  21.                 font-size: 2em;            
  22.             }
  24.             /*后代选择器*/
  25.             ul li a {
  26.                 color: red;            
  27.             }
  28.             /*兄弟元素选择器*/
  29.             ul+p {
  30.                 color: pink;            
  31.             }
  32.             /*紧邻元素选择器*/
  33.             ul.ul_1~p{
  34.                 color: yellow;            
  35.             }
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <h3>Hello</h3>
  41.         <span id="span_1">Helloword</span> <br />
  42.         <span class="span_2">Helloword</span>
  43.         <ul>
  44.             <li><a href="https://www.baidu.com" target="_black">https://www.baidu.com</a></li>
  45.             <li><span>HaHaHa</span></li>
  46.         </ul>
  47.         <p>YES1</p>
  48.         <p>YES2</p>
  49.         <ul class="ul_1">
  50.             <li><a href="https://www.baidu.com" target="_black">https://www.baidu.com</a></li>
  51.             <li><span>HaHaHa</span></li>
  52.         </ul>
  53.         <p>YES11</p>
  54.         <p>YES22</p>
  55.         <p>YES33</p>
  56.         <h1 class="h1_1">Hello world</h1>
  57.         <h1 id="h1_2">Hello world</h1>
  58.     </body>
  59. </html>

更多相关文章

  1. 表单创建及CSS
  2. 注册表单实战案例
  3. HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的
  4. 表单以及选择器
  5. 实战简单的注册表单以及选择器的认识
  6. 简单的注册和模块+CSS选择器
  7. css选择器与用户表单制作
  8. 表单与css
  9. 表单案例和css模块化与选择器

随机推荐

  1. 理解Android的本地Service和跨进程Servic
  2. Android小项目之六 apk下载
  3. 尝试查看所有XML文件的图形布局时出现Sta
  4. 最近一年做Android项目过程中，对其的一些
  5. listview中的Android listview适配器(jso
  6. android 2D 游戏的开发的方法
  7. Android 实现Activity后台运行
  8. SQLite的Android光标在方法调用时崩溃
  9. Java Android套接字连接。错误的IP地址导
  10. Android 图片添加水印图片或者文字