2020-12-04表单和Css概念

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、表单

表单含义

用来收集用户输入或选择的信息，并提交到服务器上。
html表单是由网页上可以提供用户输入和选择的一些控件（表单元素）组成的。
网站注册：轻注册重验证。

• 表单元素：

元素：HTML中，是从开始标签到结束标签中的所有代码。
表单元素指的是不同类型的控件。输入框，密码框，复选框，提交按钮等。

• 表单格式：

 <form>
    h1 p div span
    表单元素
</form>

• 换行标签：

<br/>

1.form标签

作用：用于为用户创建一个HTML表单
属性：action表单提交地址。

<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">

2.input标签

input标签： 单标签
作用：用于收集用户信息，是最重要的表单元素。
type:根据属性值不同，展示为不同的控件。比如：输入框，密码框，复选框，提交按钮

2.1输入框

type：text

功能：允许用户输入文本。

常用属性:

• value : 未输入之前的默认文本。
• placeholder：未输入之前的提示内容。
• maxlength：文本区域最多可以输入的字符数。
• minlength:文本区域最少应该输入的字符数。
• autofocus：页面加载后自动获取焦点。

2.2密码框

type：password

密 码： <input type="password" placeholder="密码">

2.3单选框

type：radio
name：名称 可以分组

如果不设置name属性，浏览器不知道哪些单元框是一组，不能做到单选的效果。给同一组单选按钮，添加一个相同的name属性值，才可以做到单选。

性 别：<input type="radio" name="nn">男
      <input type="radio" name="nn">女

2.4多选框

type：checkbox
name：名称 可以分组

爱好：<input type="checkbox" value="sing">唱
     <input type="checkbox" value="dance">跳
     <input type="checkbox" value="swimming">游泳

2.5 按钮

按钮可以分为三种：普通，提交，重置。

提交：type：submit 提交表单

重置：type reset 重置表单，回归到初始状态。

普通： type button 配合js完成一些操作

<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通">

2.6文件上传

type：file

2.7隐藏域

type：hidden

作用：提交一下不需要用户看到的数据到服务器。

隐藏域对用户是不可见。

应用场景：修改数据时。

隐藏域：<input type="hidden">

2.8通用属性

name 名称

value 定义表单元素的值，提交时会送往服务器。

disabled 禁用

readonly 只读。

required 必填项

3.label标签

label元素不会向用户呈现特殊效果。它是为鼠标用户改进可用性。如果在label元素内点击文本，就会触发此控件。

<label for="accout">账户名:</label>

4.下拉菜单

嵌套关系：select>option

option是一个文本级标签，只能放置文字。

select:定义下拉列表。
option：定义下拉选项。

<select name="address">
            <option>---请选择---</option>
            <option>上海</option>
            <option>广州</option>   
            <option>武汉</option>
</select>

4.1select常用属性

• size 显示的下拉选项的个数
• multiple 多选 按住ctrl键。

<select name="address" size="2" multiple>

4.2option常用属性

selected 默认选中。

<option selected>广州</option>

4.3optgroup分组

<select name="address">
        <optgroup label="一线城市">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </optgroup>
        <optgroup label="二线城市">
        <option>郑州</option>
        <option>西安</option>
        <option>武汉</option>
    </optgroup>
    </select>

5.文本域

作用：可以输入多行文本

rows 属性值为数字，表示行数。

cols 属性值为数字，表示列数。

<textarea cols="50" rows="30"></textarea>

6.fieldSet标签

当一组表单元素放到fieldset中时，浏览器会以线框包裹显示它们。

legend是为fieldset元素定义标题

 <fieldset>
            <legend>注册表单</legend>
      表单元素
  </fieldset>

二、CSS概念

1.css优点：

css能够极大提高工作效率。

• 能够使代码精简，可读性提高。
• 便于维护
• 结构与样式分离
• 对于搜索引擎更加友好，因为搜索引擎更注重内容。

2.css概念

cascading style sheets 层叠样式表

通俗的说：规定了HTML标签在网页上的显示样式。

样式：HTML标签在页面的显示效果。

3.css基本语法

1.选择器：谁要做样式改变。

2.声明：做什么样的样式改变。

选择器{

​ 声明；（属性：属性值）

}

p{
            color: #e67e22;
            text-align: center;
            font-size: 24px;
            font-family: "竹刻书法字体";
        }

每一条声明由一个属性和一个属性值组成，使用冒号分割，以分号结尾。

css 对于空格，换行 缩进不敏感。

合理的缩进和换行可以调高代码的可阅读性。

4.css小属性

文本样式

字体，颜色，大小。

字体：

font-family: "竹刻书法字体";

字体分为英文字体和中文字体。

字体可以有多个属性值，用逗号隔开，后面的字体表示备用字体。

英文常见字体：Arial consolas。

中文常见字体：宋体，微软雅黑，黑体。

若文本中有中文和英文，需要设置两种文字。英文字体在前，中文字体在后。

中文字体也有英文名称：

宋体，SimSun,微软雅黑 Micrsoft Yahei

盒子样式

宽 高 背景色 边框

width：宽，单位为px。

height：高，单位为px。

background-color：背景色。属性值为英文单词名称，16进制，RGB（red,green,blue）

border:边框 多个属性值，属性值之间用空格隔开。顺序为：宽度，线的类型，颜色

border: 1px solid red;

5.书写位置

根据书写位置的不同，可分为四种：行内式，内嵌式，外链式，导入式。

5.1行内式

​ css声明直接写在标签的style属性中。

优点：写法简单。

缺点：

• 结构和样式没有分离，不利于维护。
• 样式不能复用，只能对当前元素生效。

开发中不推荐使用。

5.2内嵌式

将css代码写在style标签中。style标签放置在head标签中。

<style>
        h1{
            color: red;
        } 
 </style>

优点：

• 结构与样式分离
• 样式可以复用，便于维护

缺点：

• 只对当前页面生效。

5.3外链式

<link rel="stylesheet" href="css/demo1.css">

通过link标签将独立的css文件引入到html页面中。

注意：css文件名不能以数字开头。

rel表示引入文件与页面的关系。

优点：

• 结构与样式完全分离
• 便于维护
• 多个页面可以复用
• 可以利用浏览器缓存机制，加快页面加载速度。

5.4导入式

有很多问题，不建议使用。

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

注意点:

在页面加载时，外链式时css文件与html一同加载；导入式时先加载html文件，等html文件加载完，再加载css文件。推荐使用外链式。

https://www.cnblogs.com/my–sunshine/p/6872224.html