表单和css
表单和CSS
一、==表单==
1. form表单本身
<form name="myform" action="#" method="get">
<!-- 所有的表单项写在form标签里边 -->
</form>
属性：
name：表单的名称
action：表单数据的提交路径
method：表单数据的提交方式。get, post
2. input输入项
用户名：<input type="text" name="username" value="lisi"> <br>
密码：<input type="password" name="password" > <br>
<!--生日：<input type="date"> <br>-->
性别：<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女 <br>
爱好：<input type="checkbox" name="hobby" value="code" checked>编码
<input type="checkbox" name="hobby" value="friend">交友
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="movie">电影 <br>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮"> <br>
<input type="image" src="../img/btn.jpg" value="图片提交按钮"> <br>
<input type="file" name="file">
<input type="hidden" name="hidden" value="隐藏域的值">
属性：
type：input的类型，有常见的10个
text：文本框
password：密码框
radio：单选框。
name属性相同，选择互斥
默认值设置：通过属性checked 或者 checked="checked"
checkbox：复选框
建议name属性相同，方便服务端接收数据
默认值设置：通过属性checked 或者 checked="checked"
button：普通按钮。没有功能，通过JS自定义功能的
submit：提交按钮
reset：重置按钮。把表单项的数据恢复成默认值
image：图片提交按钮。
hidden：隐藏域。不会显示到页面上的表单项
file：文件选择框。默认提交的是文件名称
name：表单项的名称，如果表单项数据要提交，就必须有name属性
value：表单项的值，作用是随着type而改变的
在text和password里：value是默认值
在radio和checkbox里：value是选项的值，选中哪个选项，就提交哪个选项的值
在button、submit和reset里：value是按钮上的提示文字
在image里：value没有实际意义
在file里：value是无效的
在hidden里：value是隐藏域的值
3. select下拉框
<select name="address">
<option value="lol">LOL</option>
<option value="wow">WOW</option>
<option value="dota">DOTA</option>
<option value="pubg">PUBG</option>
</select>
select标签：下拉框本身
name：名称。如果数据要提交，就必须有name属性
option标签：下拉框里的下拉选项
value：下拉选项的值
selected：表示被选中的选项
默认值设置：
没有手动设置时候，默认选中第一个选项
手动设置默认值：在想要默认选中的选项上增加属性selected="selected" 或者 selected
4. textarea文本域
<textarea name="myself" rows="5" cols="10">默认值写在这里</textarea>
name：如果数据要提交，就必须有name属性
rows：高度可以显示几行
cols：宽度可以显示几列。被css样式代替了
默认值设置：
textarea没有value属性，默认值是写在标签体里的（标签体：开始标签和结束标签中间的全部内容）
5. ==get提交和post提交的区别（面试题）==
get提交，表单数据在地址栏显示（在HTTP请求行里提交的）；post提交，表单数据不会在地址栏显示（在HTTP请求体里提交的）
get提交，不安全；post提交，相对安全
get提交，长度有限制；post提交，没有长度限制
二、CSS
1. div和span标签
块标签（行级元素）：独占一行的元素，比如：div, hr, h1~h6
内联标签（行内元素）：内容多大，就占多大空间的元素，比如：span, font
页面布局时，通常是div+css
2. CSS简介
CSS：cascading style sheet，层叠样式表
作用：用来修饰页面的
3. CSS语法
3.1 CSS的引入方式(CSS的位置)
写在标签的style属性里
<div style="color:red;font-size:20px;">黑马程序员1</div>
写在style标签里
<head>
<style>
div{
color:blue;
font-size: 20px;
}
</style>
</head>
<body>
<div>黑马程序员1</div>
<div>黑马程序员2</div>
</body>
写在单独的css文件里
<head>
<!--
03. 外部样式。
把样式写在一个单独的css文件里，页面里引入css文件。
link标签：
type：引入的文件类型，固定值text/css。可以不写
rel：引入的文件和当前页面是什么关系，固定值stylesheet。必须写
href：引入的文件路径。必须写
-->
<link rel="stylesheet" href="../css/my.css">
</head>
3.2 CSS的选择器
3.2.1 基本选择器
/*标签选择器：标签名称{样式名:值;样式名:值;...}*/
div{
color: red;
}
/*ID选择器：#ID值{样式名:值;样式名:值;...}*/
#kdy{
color:blue;
}
/*类选择器：.类名{样式名:值;样式名:值;...}*/
.blueClass{
color:blue;
}
优先级：ID选择器 > 类选择器 > 标签选择器。如果优先级相同，后加载覆盖先加载
3.2.2 扩展选择器
<style>
/*要求1：选中span3，设置样式：红色字体*/
#d2 .class1{
color: red;
}
/*要求2：文本框背景变成红色；密码框背景变成蓝色*/
input[type="text"]{
background-color: red;
}
input[type="password"]{
background-color: blue;
}
/*要求3：超链接a，正常状态是红色； 访问之后是绿色； 鼠标移上是黄色；鼠标按下是粉色；love and hate*/
a:link{
color: red;
}
a:visited{
color:green;
}
a:hover{
color:yellow;
}
a:active{
color: pink;
}
</style>
<!-- 要求1的环境 -->
<div id="d1">
<div>
<span class="class1">span1，类名是：class1</span>
<span class="class2">span2，类名是：class2</span>
</div>
</div>
<div id="d2">
<div>
<span class="class1">span3，类名是：class1</span>
<span class="class2">span4，类名是：class2</span>
</div>
</div>
<hr>
<!-- 要求2的环境 -->
<input type="text" value="文本框">
<input type="password" value="密码框">
<hr>
<!-- 要求3的环境 -->
<a href="#">百度</a>
3.3 CSS的属性（CSS常用样式）
4. 盒子模型
盒子模型：布局的方式，可以给每个元素设置：width、height、border、padding、margin。设置之后，元素看起来像个盒子，所以把这5个样式统称为：盒子模型。
标准盒子模型（默认）：
设置样式：
box-sizing: content-box;特点：width和height是内容区域的大小。如果设置了padding和border，盒子会撑大
怪异盒子模型：
设置样式：
box-sizing: border-box;特点：width和height是例子的大小。如果设置了padding和border，内容会缩小
表单和css的更多相关文章
- 前端-form表单与CSS
目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- Django系列之form渲染表单后css样式丢失
最通用的form写法 我们经常看各大网站上写这样的form写法 class SYSAdminPhysicalForm(forms.ModelForm): ''' this form for idc's ...
- （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表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...
- form表单和CSS
一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...
- 前端之form表单与css（1）
目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...
随机推荐
- 3.3 CCSprite 精灵详解
3.3.1 创建精灵常用的 4 种方式 (当然还有其他方式,只不过 这四种比较常用) //创建精灵常用的 4 种方式 CCSprite* spr1 = CCSprite::create(const c ...
- CodeForces - 1017E ：The Supersonic Rocket （几何+KMP，判定凸包是否同构）
After the war, the supersonic rocket became the most common public transportation. Each supersonic r ...
- poj 1845 Sumdiv（约数和，乘法逆元）
题目: 求AB的正约数之和. 输入: A,B(0<=A,B<=5*107) 输出: 一个整数,AB的正约数之和 mod 9901. 思路: 根据正整数唯一分解定理,若一个正整数表示为:A= ...
- bzoj 1355: Radio Transmission
题目大意: 求字符串的最短循环覆盖字符串 题解: 经典结论题: kmp \(ans = n - next[n]\) #include <cstdio> #include <cstri ...
- 强烈建议使用国外DNS解析域名，解决访问速度和某些访问故障！
域名解析的基本原理是把域名翻译成IP地址,以便计算机能够进一步通信,传递网址和内容等. 域名劫持就是在劫持的网络范围内拦截域名解析的请求,分析请求的域名,把审查范围以外的请求放行,否则直接返回假的IP ...
- SparkWriteToHFile
1. HFile的LoadIncrement卡住 原来是因为权限,我一直以为,load函数之后是要删除文件的,但是hdfs://slave1:8020/test/info文件夹所有的是只读权限,而且考 ...
- POJ2442：Sequence
浅谈堆:https://www.cnblogs.com/AKMer/p/10284629.html 题目传送门:http://poj.org/problem?id=2442 我们先简化题意,假设只有两 ...
- CF 293E Close Vertices——点分治
题目:http://codeforces.com/contest/293/problem/E 仍旧是点分治.用容斥,w的限制用排序+两个指针解决, l 的限制就用树状数组.有0的话就都+1,相对大小不 ...
- SQL SERVER 中的*=和=*
一.* =和= * 是在sql server2000中左连接,右连接的用法相当于left join 和right join,现在sql2005和2008默认是不支持的,可以设置兼容2000或2008 ...
- 【转】 Pro Android学习笔记（五十）：ActionBar（3）：搜索条
目录(?)[-] ActionBar中的搜索条 通过Menu item上定义search view 进行Searchable的配置 在activity中将search view关联searchable ...