一、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 ...

随机推荐

chrome flash 自动暂停问题
chrome flash 尺寸小于398*298时,只要宽和高某一个值小于对应值就会自动暂停,出现这个圆形的播放按钮.(估计是当广告处理了...) 将尺寸调大即可.
高通Camera驱动分析【转】
本文转载自:http://blog.csdn.net/liwei16611/article/details/53955711 1.Sensor slave配置结构体msm_camera_sensor ...
阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_8_File类遍历(文件夹)目录功能
遍历这个目录下的文件遍历一个文件就会报错’ 不存在的路径,也会报空指针异常遍历可以获取到隐藏的文件夹和文件.常见一个隐藏的文件和文件夹 ListFiles私有类型的数组
request.getParameter() 和request.getAttribute()
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wrs120/article/details/79287607[相同点] 1.都是HttpServle ...
spring boot 启动之后404
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
【EWM系列】SAP EWM创建warehouse task的函数
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP EWM创建warehouse ...
剑指offer--day11
1.1 题目:字符串的排列:输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba ...
20191105 《Spring5高级编程》笔记-第11章
第11章任务调度任务调度由三部分组成: 任务:需要在特定时间运行或定期运行的业务逻辑块: 触发器:指定任务应该执行的条件: 调度程序:根据来自触发器的信息执行任务: 11.2 Spring中的任务 ...
javascript 阻止事件冒泡
阻止冒泡冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
python+selenium元素定位之CSS学习02
参考文档:https://www.runoob.com/cssref/css-selectors.html CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS ...

前端之form表单与css（1）