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

随机推荐

Git 创建版本库并实现本地上传数据到GitHub库
版本库又叫做仓库,其实也是一个目录,这个目录里的所有文件都是被Git管理着,对每个文件的修改,删除,Git都会进行记录,方便我们对其进行跟踪. 因为本地是window环境,我们先从官网下载好windo ...
2009年4月，Twitter宣布他们已经把大部分后端程序从Ruby迁移到Scala
w Scala 简介 | 菜鸟教程 http://www.runoob.com/scala/scala-intro.html
Ffmpeg AAC 编码错误 Input contains (near) NaN/+-Inf
Ffmpeg AAC编码如果传入参Frame的Sample Format 为 AV_SAMPLE_FMT_S16,会出现错误提示 Input contains (near) NaN/+-Inf,需 ...
MySQL的常用JSON函数
1. JSON_SEARCH(col ->> '$[*].key', type, val) col: JSON格式的字段名 key:要搜索的col字段的key type:可以为'one'或 ...
Map类集合遍历
阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_07 缓冲流_6_BufferedReader_字符缓冲输入流
读取到的是第一行数据读取多行数据使用循环
vue组件父与子通信-登录窗口
一.组件间通信(父组件 --> 子组件)步骤:①父组件在调用子组件传值 <child-component myValue="123"> </chi ...
py学习日记
From:<python编程从入门到实践> 持续更新中... 都在代码里了第一到七章: """ Author:CruelKing Time:7/27/201 ...
HDU 6538 Neko and quadrilateral（极角排序+旋转坐标系）
这道题简直太好了,对于计算几何选手需要掌握的一个方法. 首先对于求解四边形面积,我们可以将四边形按对角线划分成两个三角形,显然此时四边形的面积最大最小值就变成了求解里这个对角线最近最远的点对. 对于此 ...
EF添加关联的提示问题：映射从第 260 行开始的片段时有问题:
一,EF添加关联的提示问题严重性代码说明项目文件行禁止显示状态错误错误 3004: 映射从第 260 行开始的片段时有问题:没有为设置 T_xx_xxRelation 中的属性 T_ ...

前端之form表单与css（1）