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

HTML 表单

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

<form> 元素

属性
- action 表单提交URL 如果省略 action 属性，则 action 会被设置为当前页面
- method 提交类型
  - post: 数据在请求体中,不在url中,安全,可发送大量的数据,例如文件上传
  - get: 数据在url中, 明文发送,适合少量数据,不超过4k
- enctype 数据编码
  - multipart/form-data 当使用有文件上传控件的表单时，必须设置该值。

表单元素

文本框

<form action="" method="POST">
      <!-- 单行文本框 -->
      <!-- 属性
          1. name: 可以把值提交到后端  如果没有name属性  后台程序就不能获得提交的数据
          2. type:  定义的是哪种类型的表单形式
            1. text 单行的文本框
            2. password  密码框  将文本替换为”*”的文本框
            3. email 邮箱 
            4. radio 单选按钮  多个选一
            5. checkbox 复选框  可选一个或多个
            6. file  文件上传域
            7. hidden 隐藏域  必须提交的数据,对用户不可见
          3. placeholder:表示文本框字段的提示信息
          4. required:表示字段不能为空
          5. autofocus:表示页面一打开文本框自动获取焦点
          6. value:表示预先设置好的信息
        -->
      <label for="username">帐号:</label>
      <input type="text" id="username" name="username" value="" placeholder="username" required />
      <!-- 邮箱型文本框 -->
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" value="" required placeholder="demo@email.com" />
      <!-- 密码型文本框/非明文 -->
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" value="" required placeholder="不少于6位" />
      <!-- 提交按钮 -->
      <button>提交</button>
    </form>

单选按钮与复选框

<label for="secret">性别:</label>
      <div>
        <!-- checked布尔属性,不需要值,只要存在就是true / 真 -->
        <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 -->
        <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
        <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
      </div>
      <label for="#">兴趣:</label>
      <div>
        <!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 -->
        <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
        <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
        <input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label>
      </div>

　下拉列表/下拉框

<div>
        <!-- 下拉列表,将变量名和多个值分开设置,由用户自己选择 -->
        <!-- name, value应该在一个标签内,但是select -->
        <select name="level">
          <option value="1">铜牌会员</option>
          <option value="2">银牌会员</option>
          <option value="3" selected>金牌会员</option>
          <option value="4">永久会员</option>
        </select>
</div>
<!-- 自定义下拉列表 -->
<!-- datalist + input  -->
<div>
        <label for="">搜索关键字:</label>
        <input type="search" name="search" list="keywords" />
        <datalist id="keywords">
          <option value="html">html</option>
          <option value="css">css</option>
          <option value="js">js</option>
          <option value="javascript">javascript</option>
        </datalist>
</div>

　文件上传　隐藏域　textarea文本域

<form action="" method="POST" enctype="multipart/form-data">
      <!-- 上传文件要注意二点:
      1. 请求类型必须是: POST
      2. 将表单数据编码设置为: enctype="multipart/form-data" -->
      <label for="pic">头像:</label>
      <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
      <input type="hidden" name="size"/>
      <input type="file" name="pic" id="pic" /
      <!-- 5. 文本域 -->
      <label for="comment">备注:</label>
      <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
      <!-- 提交按钮 -->
      <button>提交</button>
    </form>

　CSS 元素样式的来源

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
    <h1>hello world</h1>
</body>
</html>

1.默认样式: 用户代理样式,这是浏览器为每一个内置元素设置的默认样式

2.自定义: 用户自定义样式

h1 {
        color: red;
        background-color: yellow;
      }

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

<style>
     h1 {
      color: red;
      background-color: yellow;
    }
  </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.权重的计算方式

<body>
    <h3 id="a" class="b">Hello PHP.CN</h3>
    <style>
      /* 选择当前的h3有三种选择器:
        标签, class, id  */
      /* 将id,class,tag,想像成一个三位整数,初始为 0, 0 ,0 */
      /* 百位    十位     个数
         id      class   tag
         0       0       0 */
      /* 百位对应:id   十位对应:class   个位对应:tag  */
      /* 1,1,0 */
      /* #a.b {
        background-color: lightblue;
      } */
      /* 0, 1, 1 */
      h3.b {
        background-color: blue;
      }
      /* 0, 1, 0 */
      .b {
        background-color: cyan;
      }
      /* 0, 0 , 2  */
      body h3 {
        background-color: yellow;
      }
      /* 0, 0 , 1  */
      h3 {
        background-color: lightgreen;
      }
    </style>
</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; }

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

HTML 表单

<form> 元素

表单元素

文本框

单选按钮与复选框

下拉列表/下拉框

文件上传 隐藏域 textarea文本域

CSS 元素样式的来源

选择器

相关文章

　下拉列表/下拉框

　文件上传　隐藏域　textarea文本域

　CSS 元素样式的来源