表单+CSS

一、表单

1.概念

用来收集用户输入或选择的信息，并提交到服务器上。

html表单是由网页上可以提供用户输入和选择的一些控件（表单元素）组成的。
eg：网站注册：轻注册重验证

2.表单元素

元素：HTML中，是从开始标签到结束标签中的所有代码。

表单元素指的是不同类型的控件。 输入框，密码框，复选框，提交按钮等。

3.表单格式

表单格式：

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

4.标签

1.1 form标签

作用：用于为用户创建一个HTML表单。

action:表单提交的地址。

1.2 label标签

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

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

1.3 input标签(单标签)

作用：用于收集用户信息，是最重要的表单元素。

type:根据属性值不同，展示为不同的控件。比如：输入框，密码框，复选框，提交按钮

（1）输入框:

type：text

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

常用属性:

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

（2）密码框

type：password

（3）单选框

type：radio

name：名称 可以分组

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

（4）多选框

type：checkbox

name：名称 可以分组

<input type="checkbox" value="sing" name="hobby">
<input type="checkbox" value="dance" name="hobby">

（5）按钮

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

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

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

提交：type:submit 提交表单

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

（6）文件上传

type：file

（7）隐藏域

type：hidden

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

隐藏域对用户是不可见。

应用场景：修改数据时。

（8）通用属性

• name: 名称。

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

• disabled: 禁用。

• readonly: 只读。

• required: 必填项。

1.4 下拉菜单

select:定义下拉列表

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

嵌套关系：select>option

select常用属性

• size： 显示的下拉选项的个数
• multiple:多选 按住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>

1.5.文本域

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

作用：可以输入多行文本

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

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

1.6 fieldSet标签

 <fieldset>
            <legend>注册表单</legend>
      表单元素
  </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：背景色。属性值可以是英文单词名称（red）、16进制、RGB（red,green,blue）

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

border: 1px solid red;

5.书写位置

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

行内式

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

<h1 align="center">
        <font color="red" size="7" face="竹刻书法字体">
            题都城南庄
        </font>
</h1>
<p align="center">
        <font color="8e44ad" size="5" face="竹刻书法字体">人面桃花相映红</font>
</p>

优点：写法简单。

缺点：

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

开发中不推荐使用

内嵌式

将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