表单基本概念

表单

0表单：

用来收集用户输入或选择的信息，并提交到服务器上。
html表单是由网页上可以提供用户输入和选择的一些控件（表单元素）组成的。
网站注册：轻注册重验证
表单元素
元素：HTML中，是从开始标签到结束标签中的所有代码。
表单元素指的是不同类型的控件。 输入框，密码框，复选框，提交按钮等。

表单格式：

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

form标签
作用：用于为用户创建一个HTML表单。
action:表单提交的地址。没有写时，默认是本网页

1.input标签

单标签

1.1输入框

type：

text
功能：允许用户输入文本。
常用属性:

• value : 未输入之前的默认文本。（在点击提交或【button】按钮时，在网址栏会自动显示输入和选择的属性）
  
  

• placeholder：未输入之前的提示内容。
  

• maxlength：文本区域最多可以输入的字符数。

• minlength:文本区域最少应该输入的字符数。

• autofocus：页面加载后自动获取焦点。

• name：名称 可以分组

1.2密码框

type：password

1.3单选框

type：radio

name：名称 可以分组

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

1.4多选框

type：checkbox
name 属性值一致，否则无法分辨为一组（name用方法与单选框一样）

1.5 按钮

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

提交：type:submit 提交表单

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

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

1.6文件上传

type：file

1.7隐藏域

type：hidden

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

隐藏域对用户是不可见。

应用场景：修改数据时。

通用属性

name 名称

value 定义表单元素的值，提交时会送往服务器。（搭配name使用，若name没有属性值时，value不会在提交时送往服务器）

disabled 禁用（文本框显示为灰色）

readonly 只读。（无法修改文本框内容）

required 必填项

2.label标签

label元素不会向用户呈现特殊效果。它是为鼠标用户改进可用性。如果在label元素内点击文本，就会触发此控件。（需与id一同使用，for与id的属性值保持一至）

<label for="account">账户名</label>
 <input type="text" placeholder="请输入信息" name="account" id="account">

3.下拉菜单

嵌套关系：select>option

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

select:定义下拉列表

select常用属性

• size 显示的下拉选项的个数
• multiple 多选 配合Ctrl使用（按住ctrl键，然后做出选择）。
• option：定义下拉选项。

option常用属性

selected 默认选中。

optgroup分组

		<select name="address">
                <option>---请选择---</option>
                <optgroup label="一线城市">
                    <option>北京</option>
                    <option>上海</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="二线城市">
                    <option>武汉</option>
                    <option>重庆</option>
                    <option>郑州</option>
                </optgroup>
            </select>

4.文本域

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

作用：可以输入多行文本

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

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

5.fieldset标签

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

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.书写位置

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

行内式

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

<h2 style="color: red;text-align: center;font-size: 16px;font-family:Arial">题都城南庄</h2>

优点：写法简单。

缺点：

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

开发中不推荐使用。

内嵌式

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

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

优点：

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

缺点：

• 只对当前页面生效。

外链式

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

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

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

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

优点：

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

导入式

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

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

注意点:

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

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