html form 选择元素,HTML表单元素及CSS

表单

一、介绍

标签表示为表单，表单元素是允许用户在表单中输入内容。

属性：action-提交表单的地址

Method-提交表单的方式。属性值：get/post

Enctype-被提交表单的MIME类型

二、表单组件

组件一般被定义在表单中(

标签中)

标签表示输入框，为空标签。

元素在

元素中使用，用来声明允许用户输入数据的 input 控件。

属性1：type，type 属性规定要显示的 元素的类型。

属性值：text-表示输入框类型

- value - 表示输入框的值

* 输入框所输入的文本内容

* type - 表示输入框的类型

* text - 表示文本输入框

* password - 表示密码框

* button - 表示按钮

* reset - 表示重置按钮

- 将表单内组件内容清除效果

* submit - 表示提交按钮

- 将当前的表单提交给指定的地址(action)

* radio - 表示单选框

-表示一组单选框(name属性)中只能选择一个

* checkbox - 表示多选框

-表示一组多选框，允许选择多个

* file - 表示文件域

-作用 - 允许选择本地的文件(默认不限制类型)

-用途 - 多用于文件上传

-hidden - 表示隐藏域

-不会被显示在页面中(用户看不到)

-作用 - 用于存储一些不希望被用户看到的数据

三、下拉列表

标签表示下拉列表

- 默认 - 表示下拉单选框

- 属性

-id - 表示标识

- name - 表示名称

标签表示下拉列表的选项

- value - 表示值

标签 - 下拉多选框

-属性

- size - 表示下拉列表默认显示选项的个数

-multiple - 表示多选

四、文本域

标签表示文本域

- 属性

- cols - 表示列

- rows - 表示行

五、提交表单

1.实现提交表单的功能

-定义

标签，并且定义表单组件

-必须定义提交按钮(submit)

- 必须配合

标签的action属性使用

2.method - 表示提交表单的方式

- get - 默认方式，表单的所有请求数据被添加在请求地址中

- 请求地址(在标准规范中是有限制的)

-大小限制 - 无法添加数据量较大的内容

-未加密(明文)

- post - 一般建议使用这种

3.提交表单的方式至少两种，分别是get和post

- 提交表单的方式常用是七种

-RESTFul API(标准式API)

- get - 获取

- post - 修改

- put - 新增

- delete - 删除

六、文件上传

1.提交表单方式

- get - 只是将文件名称发送给服务器端

- 没有实现文件上传功能

- - post - 只是将文件名称发送给服务器端

- enctype属性

- application/x-www-form-urlencoded - 是

标签的默认值

- 专门用于提交表单组件的内容(数据)为：

- multipart/form-data - 用于文件上传

2.

-默认 - 只能选择一个文件

-选择多个文件 - multiple 属性

CSS

一、内联样式

1.内联样式 - 通过HTML的标准属性 style 实现

-style="CSS的内容"

- 问题

-设置的样式只针对当前HTML元素有效

-相同样式设定无法被重复使用

- 并没有将结构与样式有效分离

2.标签 -

1) 内嵌样式表

-用法 - 该标签中定义CSS的内容

-好处

-HTML的结构与样式分离(相对于内联样式)

-定义的样式可以被重复使用

-不是针对某个指定HTML元素

-坏处

- CSS的内容依旧被定义在HTML页面中

2) 外联样式表

二、MIME类型：

-作用 - 规定当前文档的具体使用类型是什么

-值：

-html页面 - text/html

-css文件 - text/css

-JavaScript文件 - text/javascript

-1.与表单相关的

- application/x-www-form-urlencoded

- multipart/form-data

-2.与图片相关的

- image/png

- image/jpg

- image/jpeg

- image/gif

-3.与文本相关的

- text/plain

三、CSS选择器

作用：定位HTML页面中的标签

举例：

h1,h2 {

color: lightsalmon;

font-size: 84px;

}

1.{}-表示声明块/组

2.CSS声明包含： 样式属性：值

3.注意： :(冒号)和;(分号)都是英文状态下的。

冒号表示分隔符，分号表示结束符。