search

博客列表 >HTML 表单详解 与 CSS 元素样式来源

HTML 表单详解 与 CSS 元素样式来源

至诚网络的博客
至诚网络的博客原创
2021年09月25日 16:41:13442浏览

HTML 表单

HTML表单, 用于搜集不同类型的用户输入

<form> 元素

  • 属性

    • action 表单提交URL 如果省略 action 属性，则 action 会被设置为当前页面

    • method 提交类型

      • post: 数据在请求体中,不在url中,安全,可发送大量的数据,例如文件上传

      • get: 数据在url中, 明文发送,适合少量数据,不超过4k

    • enctype 数据编码

      • multipart/form-data 当使用有文件上传控件的表单时，必须设置该值。

表单元素

文本框
  1. <form action="" method="POST">
  2.       <!-- 单行文本框 -->
  3.       <!-- 属性
  4.           1. name: 可以把值提交到后端  如果没有name属性  后台程序就不能获得提交的数据
  5.           2. type:  定义的是哪种类型的表单形式
  6.             1. text 单行的文本框
  7.             2. password  密码框  将文本替换为”*”的文本框
  8.             3. email 邮箱 
  9.             4. radio 单选按钮  多个选一
  10.             5. checkbox 复选框  可选一个或多个
  11.             6. file  文件上传域
  12.             7. hidden 隐藏域  必须提交的数据,对用户不可见
  13.           3. placeholder:表示文本框字段的提示信息
  14.           4. required:表示字段不能为空
  15.           5. autofocus:表示页面一打开文本框自动获取焦点
  16.           6. value:表示预先设置好的信息
  17.         -->
  18.       <label for="username">帐号:</label>
  19.       <input type="text" id="username" name="username" value="" placeholder="username" required />
  20.       <!-- 邮箱型文本框 -->
  21.       <label for="email">邮箱:</label>
  22.       <input type="email" id="email" name="email" value="" required placeholder="demo@email.com" />
  23.       <!-- 密码型文本框/非明文 -->
  24.       <label for="password">密码:</label>
  25.       <input type="password" id="password" name="password" value="" required placeholder="不少于6位" />
  26.       <!-- 提交按钮 -->
  27.       <button>提交</button>
  28.     </form>
单选按钮与复选框
  1. <label for="secret">性别:</label>
  2.       <div>
  3.         <!-- checked布尔属性,不需要值,只要存在就是true / 真 -->
  4.         <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 -->
  5.         <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
  6.         <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
  7.         <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
  8.       </div>
  10.       <label for="#">兴趣:</label>
  11.       <div>
  12.         <!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 -->
  13.         <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
  14.         <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
  15.         <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
  16.         <input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label>
  17.       </div>
　下拉列表/下拉框
  1. <div>
  2.         <!-- 下拉列表,将变量名和多个值分开设置,由用户自己选择 -->
  3.         <!-- name, value应该在一个标签内,但是select -->
  4.         <select name="level">
  5.           <option value="1">铜牌会员</option>
  6.           <option value="2">银牌会员</option>
  7.           <option value="3" selected>金牌会员</option>
  8.           <option value="4">永久会员</option>
  9.         </select>
  10. </div>
  11. <!-- 自定义下拉列表 -->
  12. <!-- datalist + input  -->
  13. <div>
  14.         <label for="">搜索关键字:</label>
  15.         <input type="search" name="search" list="keywords" />
  16.         <datalist id="keywords">
  17.           <option value="html">html</option>
  18.           <option value="css">css</option>
  19.           <option value="js">js</option>
  20.           <option value="javascript">javascript</option>
  21.         </datalist>
  22. </div>
　文件上传　隐藏域　textarea文本域
  1. <form action="" method="POST" enctype="multipart/form-data">
  2.       <!-- 上传文件要注意二点:
  3.       1. 请求类型必须是: POST
  4.       2. 将表单数据编码设置为: enctype="multipart/form-data" -->
  5.       <label for="pic">头像:</label>
  6.       <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  7.       <input type="hidden" name="size"/>
  8.       <input type="file" name="pic" id="pic" /
  10.       <!-- 5. 文本域 -->
  11.       <label for="comment">备注:</label>
  12.       <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  13.       <!-- 提交按钮 -->
  14.       <button>提交</button>
  15.     </form>

　CSS 元素样式的来源

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     hello world
  11.     <h1>hello world</h1>
  12. </body>
  13. </html>
  • 1.默认样式: 用户代理样式,这是浏览器为每一个内置元素设置的默认样式

  • 2.自定义: 用户自定义样式
  1. h1 {
  2.         color: red;
  3.         background-color: yellow;
  4.       }

  • style标签设置样式,适合于当前html文档

    1. <style>
    2.      h1 {
    3.       color: red;
    4.       background-color: yellow;
    5.     }
    6.   </style>

  • style属性: 行内样式,仅限于当前元素 <h1 style="color: green">hello php.cn</h1>

  • 导入外部样式表

    • <link rel="stylesheet" href="style.css" />

    • <style>@import url(style.css);</style>

选择器

选择器: 用于选择页面中一个或多个元素的字符串

  • 1.几乎所有的元素都可以使用的三大通用属性 style, id, class

    • 属性id 选择器 [id="title"]{color: violet;} 简写成 #title{color: violet;}

    • 属性 class选择器 [class="title"]{color: violet;} 简写成 .title{color: violet;}

    • 标签 选择器 h2{color: violet;}

  • 2.选择器优先级

    • 相同选择器 会根据书写顺序后面写的会覆盖前面写的

    • 不同选择器 和书写的顺序无关 与权重有关 !important > style属性 > id > class > tag

  • 3.权重的计算方式

  1. <body>
  2.     <h3 id="a" class="b">Hello PHP.CN</h3>
  3.     <style>
  4.       /* 选择当前的h3有三种选择器:
  5.         标签, class, id  */
  6.       /* 将id,class,tag,想像成一个三位整数,初始为 0, 0 ,0 */
  7.       /* 百位    十位     个数
  8.          id      class   tag
  9.          0       0       0 */
  10.       /* 百位对应:id   十位对应:class   个位对应:tag  */
  12.       /* 1,1,0 */
  13.       /* #a.b {
  14.         background-color: lightblue;
  15.       } */
  17.       /* 0, 1, 1 */
  18.       h3.b {
  19.         background-color: blue;
  20.       }
  22.       /* 0, 1, 0 */
  23.       .b {
  24.         background-color: cyan;
  25.       }
  26.       /* 0, 0 , 2  */
  27.       body h3 {
  28.         background-color: yellow;
  29.       }
  30.       /* 0, 0 , 1  */
  31.       h3 {
  32.         background-color: lightgreen;
  33.       }
  34.     </style>
  35. </body>

  • 上下文选择器

    • 只能选中 子元素 : > .list > li { border: 1px solid rgb(150, 56, 56); }

    • 后代元素都能选中 : 空格 .list li { border: 1px solid #000; }

    • 相邻兄弟/next/下一个 : + .list .item + li { background-color: cyan; }

    • 所有兄弟元素 : ~ .list .item ~ li { background-color: cyan; }

上一条：表单+选择器权重计算+上下文选择器下一条：CSS3 媒体（@media）查询简介
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多