一、form表单

form表单用于用户界面向服务器传输数据，实现用户和web服务器的交互。表单包含input系列标签如文本字段、复选框、单选框、提交按钮等。

1.1表单的属性

属性	描述
accept-charset	规定在被提交表单中所使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所使用的HTTP方法（默认：get）
name	规定识别表单的名称（对于DOM使用：document.form.name）
novalidate	规定浏览器不验证表单
	规定action属性中地址的目标（默认：_self）

1.2input

input元素会根据不同的type属性实现不同的界面功能。

type	表现形式	对应代码
text	单行输入文本	<input type="text" id="dl" value="ahao" name="username">
password	密码输入框	<p>密码：<input type="password"></p>
date	日期输入框	<p>生日：<input type="date"></p>
CheckBox	复选框	<input type="checkbox" name="hobby" value="basketball">
radio	单选框	<input type="radio" name="gender" value="male">
submit	提交按钮	<input type="submit" value="提交">
reset	重置按钮	<input type="reset" value="重置">
button	普通按钮	<input type="button" value="按钮">
hidden	隐藏输入框	<input type="hidden"></p>
file	文本选择框	<input type="file" name="my_file"></p>

name和value是页面往后端发送的数据的key和value(所有获取用户输入的标签都应该有name属性)，当点击提交按钮时会向后端提交数据，当点击reset按钮时会重置所有选择框的数据。用户名等输入框的value是框内的默认值，也就是如果有输入就按输入来，如果没有就使用默认值。另外，input可以加disabled属性禁用该input框(适用于所有的input)，选择标签（radio、checkbox）设置默认选中的方法是在后面添加checked=‘checked’（也可以只写checked，当属性名和属性值相同时可以只写属性值）

value：表单提交时对应项的值

type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值

readonly：text和password设置只读

form表单如果需要提交文件数据，需要在form的属性里修改enctype，即修改为enctype="multipart/form-data"，如下面的程序

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>form表单</title>

</head>

<body>

<h1>注册页面</h1>

<form action="https://www.123.com.cn" method="post" enctype="multipart/form-data">

    <p>

        <label for="dl">

            用户名：<input type="text" id="dl" value="ahao" name="username">

        </label>

    </p>

    <p>密码：<input type="password"></p>

    <p>生日：<input type="date"></p>

    <p>性别：

        男<input type="radio" name="gender" value="male">

        女<input type="radio" name="gender" value="female">

    </p>

    <p>爱好：

       篮球 <input type="checkbox" name="hobby" value="basketball">

       足球 <input type="checkbox" name="hobby" value="football"></p>

    <p>

        省份：

        <select name="provience" id="">

            <option value="shenzhen">深圳</option>

            <option value="zhejiang">浙江</option>

            <option value="henan">河南</option>

        </select>

    </p>

<p>

    研究方向：

    <select name="" id="1" multiple>

    <option value="">无人机</option>

    <option value="">机器人</option>

    <option value="">人工智能</option></select>

</p>

<p>自我介绍：

    <textarea name="info" id="" cols="100" rows="10"></textarea></p>

<p>个人简历：

    <input type="file" name="my_file"></p>

    <p>隐藏标签：

        <input type="hidden"></p>

    <p>

        <input type="button" value="按钮">

        <input type="reset" value="重置">

        <input type="submit" value="提交">

        <button>提交按钮</button><!--此处也是提交按钮-->

    </p>

</form>

</body>

</html>

1.2.1form表单提交数据的两种方式

<input type="submit" value="提交">

<button>提交按钮</button><!--此处也是提交按钮-->

1.3select标签

属性	说明
multiple	布尔属性，设置后为多选，否则默认为单选
disabled	禁用
selected	默认选中该选项
value	定义提交时的选项值

<p>

    研究方向：

    <select name="" id="1" multiple>

    <option value="">无人机</option>

    <option value="">机器人</option>

    <option value="">人工智能</option></select>

</p>

1.4label标签

定义：标签为 input 元素定义标注（当点击input框旁边的文字的时候光标也会跳转到input框内，如下例中的用户名）。

说明：

label 元素不会向用户呈现任何特殊效果。
标签的 for 属性值应当与相关元素的 id 属性值相同。

 <label for="dl">

            用户名：<input type="text" id="dl" value="ahao" name="username">

        </label>

1.5textarea多行文本标签

属性	描述
name	名称
row	行数
cols	列数
disabled	禁用

<p>自我介绍：

    <textarea name="info" id="" cols="100" rows="10"></textarea></p>

二、CSS

2.1css介绍

css（cascading style sheet，层叠样式表）定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表进行格式化（格式化就是渲染）。

2.2css语法

2.2.1css实例

每个css样式由选择器和声明组成，声明包括属性和属性值，每个声明用分号隔开。

2.2.2css注释

css的注释方式和C语言的多行注释方式相同，但需要说明的是，css单行与多行注释方式相同。

/*注释*/

2.3css的几种引入方式

所谓引入方式就是将css代码在HTML页面代码中执行的方式。

2.3.1行内样式

行内样式指在标记的style属性中设置css样式，不推荐使用。

<p style="color: aqua">欢迎来到我的博客</p>

2.3.2内部样式

将css样式集中写在head标签对的style标签对中，格式如下：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>p{

                background-color: aqua;

            }

    </style>

</head>

<body>

<p>我是p标签</p>

</body>

2.3.3外部样式

该样式指在另一个文件中写css，然后引入到页面中实现对页面的控制。

如：link可以放在head标签对和body标签对里面

<link rel="stylesheet" href="01.css">

2.4css选择器

css选择器就是使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

2.4.1基本选择器

2.4.1.1元素选择器

p{

                background-color: aqua;

            }

2.4.1.2ID选择器

#l1 {

    background-color: blueviolet;

}

这里需要说明的是不能用纯数字作为id，否则渲染不成功

2.4.1.3类选择器

 .a1{

            color: cadetblue;

        }

注意这里是.类名{类里的内容}

2.4.1.4通用选择器

*{

            color: cadetblue;

        }

*指的是所有，这里的意思是让所有的元素都变成指定的颜色

2.4.2组合选择器

2.4.2.1后代选择器

一个标签内部的的标签，都可以称为这个标签的后代。

<div id="l2" class="a1">我是div

<p id="l1">我是p标签

</p>

    <div>我是第二代div

    <div>我是第三代div</div>

    </div>

</div>

第一个div里面的p和div都是第一个div的后代。

div div{

            color: aquamarine;

        }

第一个div里面的div都被设置成color的颜色，注意后代选择器的特点，标签名+空格+后代的标签名。

这里第二个div里面的所有的标签都会被设置成color的颜色。

2.4.2.2儿子选择器

div>div{

            color: aquamarine;

        }

    </style>

儿子选择器就是父亲名>儿子名，如果后代的名称都相同，则都被设置成color的颜色，如果儿子的后代的标签和儿子不是同一个标签名，则只设置儿子标签。

2.4.2.3弟弟选择器

 div~p{

            color: aquamarine;

        }

将div下面所有的p都设置成color的颜色，只要在div下面不管隔几个会都被设置成color的颜色

2.4.2.4毗邻选择器

div+p{

            color: aquamarine;

        }

只设置div下面紧挨着的那个p的颜色,如果div下面没有p，就不设置。

2.4.3属性选择器

用于选取带有指定属性（如id，属性名=属性值，属性名等）的元素。

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>[name='p1']{

        color: blue;

    }</style>

</head>

<body>

<p name="p1">p1</p>

<p name="p2">p2</p>

<p name="p3">p3</p>

    在[]里填写要选取的元素的属性。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>[pname]{

        color: blue;

    }</style>

</head>

<body>

<p name="p1">p1</p>

<p pname="p2">p2</p>

<p name="p3">p3</p>

</body>

</html>

2.4.4分组和嵌套

分组：当多个元素的样式相同的时候，我们没必要重复的为每个元素都设置样式，可以在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

如：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>[name='p1'],[pname]{

        color: blue;

    }</style>

</head>

<body>

<p name="p1">p1</p>

<p pname="p2">p2</p>

<p name="p3">p3</p>

</body>

嵌套：多种选择器混合起来使用

2.4.5伪类选择器

主要对link的链接颜色动作进行设置(这里需要注意的是hover必须要在visited后面)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*未访问时链接的颜色*/

        a:link{

            color: ghostwhite;

        }

        /*已访问的链接的颜色*/

        a:visited{

            color: darkslateblue;

        }

        /*鼠标移到链接上时显示的颜色*/

        a:hover {

            color:red;

        }

        /*当鼠标点击且没有放开时链接的颜色*/

        a:active{

            color: blue;

        }

        /*输入框获取焦点时的颜色*/

        input:focus{

            background-color: ivory;

        }

        span:hover{

            background-color: blue;

        }

    </style>

</head>

<body>

<a href="https://www.mi.com/">点我</a>

<input type="text">

<span></span>

</body>

</html>

2.4.6伪元素选择器

first-letter

控制标签里面的第一个字的大小，场景如报纸或者小说的第一个字都写的比较大。

 p:first-letter{

        font-size: 60px;

        color: aqua;

    }

before在内容最前面插入指定的字符，这个字符在显示的时候不能被选中，使用这个之后，不能再用上面的first-letter。

p:before{

        content: "*";

        color: chartreuse;

    }

after在content最后面插入指定的字符，也不可选中。

 p:after{

         content: "#";

        color: fuchsia;

        }

after和before多用于清除浮动。

2.4.7选择器的优先级

选择器相同的情况下引入刚方式不同，遵循就近原则，谁距离标签近用谁的。
选择器不同的情况下

行内选择器>id选择器（使用较多）>类选择器（使用较多）>元素选择器

前端之form表单与css（1）的更多相关文章

前端-form表单与CSS
目录 form表单表单属性 label标签 input标签 select 下拉框标签 textarea多行文本提交 Flask 结合form表单初探 CSS介绍以及基本选择器基本选择器组合选 ...
前端form表单与css
form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端参数 action 控制数据提交的地址三种书写方式 1.不写默认就是朝当前这个页面所在 ...
form表单和CSS
一.form表单 1. form表单有什么用能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...
form表单与CSS选择器和样式操作
form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...
form表单，css简介，css选择器，css样式操作
form表单简介表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...
form表单与css选择器
目录 form表单 action属性 input标签 lable标签 select标签 textarea标签补充网络请求方式 CSS简介 CSS基本选择器组合选择器属性选择器分组与嵌套伪类 ...
（day43）form表单、css
目录昨日回顾一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...
1113 form表单与css选择器
目录 1.form表单 form元素特点参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...
form表单和CSS基础
form 表单 input type="" 表单的组合标签,用来确定需要的是什么输入类型 type属性值: 文本输入框:text 密码输入框:password 单选按钮:radio ...

随机推荐

node.js配置环境变量
今天配置node.js的时候,碰到了配置环境变量的问题为什么会出这样的问题: 因为我将 node.js 安装到了D盘,(这是个坑,以后一定要安到C盘),当我发现,我的node操作指令无效的时候,知道 ...
Booting the Linux/ppc kernel without Open Firmware
The DT block format 这一章定义了传递给内核的FDT(flattened device tree)的格式.关于它包含的内容以及内核需要的属性将在后续章节描述. 注:DT block应 ...
git_02_git常用操作命令
前言 Git是一个开源的分布式版本控制系统,可以有效.高速地处理从小到大的项目版本管理.编写自动化测试脚本的过程中,经常要用到git命令,但总是记不住,每次都要百度有些麻烦.于是为了方便使用,在这总结 ...
[USACO 2008 Jan. Silver]架设电话线 —— 最短路+二分
一道图论的最短路题.一开始连最短路都没想到,可能是做的题太少了吧,完全没有思路. 题目大意: FJ的农场周围分布着N根电话线杆,任意两根电话线杆间都没有电话线相连.一共P对电话线杆间可以拉电话线,第i ...
Java io基础
1.什么是IO? Java IO即Java 输入输出系统.不管我们编写何种应用,都难免和各种输入输出相关的媒介打交道,其实和媒介进行IO的过程是十分复杂的,这要考虑的因素特别多,比如我们要考虑和哪种媒 ...
压缩图片工具类，压缩100KB以内拿走直接用
最近遇到自拍上传图片过大问题,很烦恼,所以自己写了一个压缩图片的工具类使用,自测效果很不错,可以压缩到KB以内,像素还可以分辨清晰下面Java代码奉上: import lombok.extern.s ...
Redis进阶:Redis的持久化机制
Redis进阶:Redis的持久化机制 Redis的持久化机制目前包括RBD和AOF两种方式. RDB持久化 RDB持久化方式是在指定的时间间隔对数据进行快照存储.过期的键值不会被存储到快照中.如果恢 ...
nginx 配置总结
可以选择在http{ }中设置:client_max_body_size 20m; 也可以选择在server{ }中设置:client_max_body_size 20m; 还可以选择在locatio ...
Spring源码解析-核心类之XmlBeanFactory 、DefaultListableBeanFactory
DefaultListableBeanFactory XmlBeanFactory 继承自 DefaultListableBeanFactory , 而 DefaultListableBeanFact ...
nested exception is java.lang.NoClassDefFoundError: org/hibernate/validator/resourceloading/ResourceBundleLocator
原来的hibernate-validator-5.3.0.Final.jar里没有这个接口,换成 hibernate-validator-4.1.0.Final.jar 就好了

前端之form表单与css（1）