form表单(******)
能够获取用户输入(输入,选择,上传的文件)
并且将用户输入的内容全部发送给后端 参数
action 控制数据提交的地址
三种书写方式
1.不写 默认就是朝当前这个页面所在的地址提交数据
2.写全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
method 控制数据提交的方式
get form表单默认是get请求
post 通常情况下input需要结合label一起使用
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后点击label标签内任何的位置都可以自动选中input框 <label for="d2">用户名:</label>
<input type="text" id="d2"> form表单中的input就类似于是前端的变形金刚
根据typy参数的不同 展示不同的功能
text 普通文本
password 输入的内容 会变成密文
date 日期
radis 单选圆圈
checkbox 多选 打钩
hidden 隐藏
file 传文件 button 普通按钮 没有任何意义 然后却是用的最多的 你可以给它绑定js事件
reset 重置按钮
submit 提交按钮 能够自动触发form表单提交数据的动作 select标签 下拉框
一个个的option标签就是一个个的选项 默认是单选
你可以给select标签加一个multiple参数 就可以变成多选 textarea标签 获取大段文本 input标签可以加disable属性 禁用该input框
input标签可以加value属性 设置默认值
选择的标签 如何默认选中
radio
checkbox
checked='checked'
当属性名和属性值相同的时候 可以只写属性名(******) 能够触发form表单提交数据的动作有两个标签可以(******)
input标签type=submit
button标签 所有获取用户输入的标签 都应该有name属性(******)
name属性就类似于字典的key
input框获取到的用户输入都会放到input框的value属性中 针对选择框 传到后端的数据 有value属性决定 form表单如果要提交文件数据 必须修改以下参数
enctype="multipart/form-data" CSS
层叠样式表
用来控制html标签样式的 注释
/*单行注释*/
/*
多行注释1
多行注释2
*/ 通常我们在写css的时候 都会单独写一个css文件 里面只有css代码
/*这是小米网站首页的css样式文件*/ /*通用样式*/ /*导航条样式*/ /*轮播图样式*/ css的语法结构
选择器 {属性1:属性值1} css的三种引入方式
1.通过link标签引入外部的css文件(最正规用法)
<link rel="stylesheet" href="02%20小米css样式.css">
2.直接在html页面上的head内通过style标签直接书写css代码
<style>
h1 {
color: green;
}
</style>
3.行内式(直接在标签内部通过style属性直接书写) 不推荐使用
<h1 style="color: orange">我是Oscar</h1> 我们需要先学习 如何查找标签
然后在学习如何修改样式 css查找 很重要 只要你学会了css的查找 后面js jQuery的标签查找都是一个原理 基本选择器
元素选择器 id选择器 类选择器 通用选择器 组合选择器
div span div>span div+span div~span 属性选择器
补充
任何的标签都有自己的默认的属性 id class
标签还支持你自定义任何多的属性(也就意味着可以让标签帮你携带一些额外的数据)(******) 伪类选择器
a标签有四种状态
1.没有被点击过
2.鼠标悬浮上面
3.点击之后不松手
4.点击之后 再回去 我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus
鼠标移出去之后的状态 叫做input框失去焦点 伪元素选择器 (清除浮动带来的负面影响)
可以通过css添加文本内容 选择器优先级
1.选择器相同的情况下 引入方式不同
遵循就近原则 谁离标签更近 就听谁的 2.选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器

前端form表单与css的更多相关文章

  1. 前端-form表单与CSS

    目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...

  2. 前端之form表单与css(1)

    目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...

  3. 基于JQuery的前端form表单操作

    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...

  4. form表单和CSS

    一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...

  5. form表单与CSS选择器和样式操作

    form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...

  6. form表单,css简介,css选择器,css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  7. form表单与css选择器

    目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

  8. javaWeb 中前端Form表单数据处理(手动拼json)

    在前端我们会用到最多的就是form表单提交数据,在form表单中有很多都是自动将数据传到后台,然后通过实体来接受的,但是有的时候我们就是需要在前端就拿到这个Form表单的数据,这是我们就可以自己讲数据 ...

  9. (day43)form表单、css

    目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...

随机推荐

  1. linux下杀进程的方法

    http://www.linuxidc.com/Linux/2011-08/40052.htm kill -s 9 2222

  2. C++类中的一些细节(重载、重写、覆盖、隐藏,构造函数、析构函数、拷贝构造函数、赋值函数在继承时的一些问题)

    1 函数的重载.重写(重定义).函数覆盖及隐藏 其实函数重载与函数重写.函数覆盖和函数隐藏不是一个层面上的概念.前者是同一个类内,或者同一个函数作用域内,同名不同参数列表的函数之间的关系.而后三者是基 ...

  3. PhpMyAdmin提示未加密

    新版本的PhpMyAdmin 增强了安全性,需要在配置文件设置一个短语密码.否则进入之后会有“配置文件现在需要一个短语密码.”的红色警叹提示. 解决方法: .将 phpMyAdmin/librarie ...

  4. 【VS开发】MFC运行时库与debug、release版本之间的配置关系

    参考内容: 前段时间从网上下来一个有意思的代码,用VS2010打开时需要将工程转换为2010的工程,转化后却出现了编译不通过的问题,类似这样的错误:c:\program files\microsoft ...

  5. 【Linux 网络编程】REUSADDR

    (1)服务器端尽可能使用REUSEADDR.(2)在绑定之前尽可能调用setsockopt来设置REUSEADDR套接字选项.(3)使用REUSEADDR选项可以使得不必等待TIME_WAIT状态消失 ...

  6. Spread.NET 表格控件 V12.0 Update2 发布更新

    Spread.NET表格控件V12.0 Update 2 已经正式发布,本次发布主要针对WinForm平台下客户反馈的产品使用功能进行优化,并修复了已知问题,具体修复情况见下方说明. Spread.N ...

  7. # 匈牙利算法(二分图最大匹配)- hdu 过山车

    匈牙利算法(二分图最大匹配)- hdu 过山车 Hdu 2063 二分图:图中的点可以分成两组U,V,所有边都是连接U,V中的顶点.等价定义是:含奇数条边的图. 匹配:一个匹配是一个边的集合,其中任意 ...

  8. # 江西CCPC省赛-Rng(概率+逆元)

    江西CCPC省赛-Rng(概率+逆元) 题意: 给出一个n,在[1,n]之间选一个R1,在[1,R1]之间选一个L1,得到区间[L1,R1],同理获取区间[L2,R2],问两个区间相交的概率对1e9+ ...

  9. 第二篇 jQuery 选择器

    2-1,2  table隔行变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  10. 简析P和NP问题的概念

    简析P和NP问题的概念 本文系作者学习笔记,内容均来源于网络,如有侵权,请联系删除 P类问题:所有能用多项式时间算法计算得到结果的问题,称为多项式问题,也就是P(polynomial). 多项式时间举 ...