表单和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提交的区别（面试题）==

  1. get提交，表单数据在地址栏显示（在HTTP请求行里提交的）；post提交，表单数据不会在地址栏显示（在HTTP请求体里提交的）

  2. get提交，不安全；post提交，相对安全

  3. 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的更多相关文章

  1. 前端-form表单与CSS

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

  2. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

  3. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  4. Django系列之form渲染表单后css样式丢失

    最通用的form写法 我们经常看各大网站上写这样的form写法 class SYSAdminPhysicalForm(forms.ModelForm): ''' this form for idc's ...

  5. （day43）form表单、css

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

  6. 1113 form表单与css选择器

    目录 1.form表单 form元素 特点 参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...

  7. 前端form表单与css

    form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...

  8. form表单和CSS

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

  9. 前端之form表单与css（1）

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

随机推荐

  1. JS判断2个时间是否在同一周

    function isSameWeek(old, now) { var oneDayTime = 1000 * 60 * 60 * 24; var old_count = parseInt(+old ...

  2. 关于MFC视图文档框架的理解-1

    一.单个文档和多个文档的区别: MFC分为对话框程序,单文档程序和多文档程序. 单个文档程序:一个主框架内仅允许打开一个视图,若要打开另一个,则当前的文档必须得关闭.单文档程序可以打开不同格式的文档. ...

  3. JavaWEB - JSP 指令

  4. 将session存入数据库，memcache的方法

    //存入数据库 <?phpif(!$con = mysql_connect('localhost','root','123456')){    die('连接数据库失败');}$link = m ...

  5. 2017-2018-1 20179203 《Linux内核原理与分析》第九周作业

    攥写人:李鹏举 学号:20179203 ( 原创作品转载请注明出处) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/US ...

  6. [转]阮一峰：理解RESTful架构

    作者: 阮一峰 日期: 2011年9月12日 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通 ...

  7. MySQL查询计划输出列的含义

    "一:MySQL查询计划输出列的含义:1.id:每个被独立执行的操作的标识,表示对象被操作的顺序:id值越大,先被执行:如果相同,执行顺序从上到下.2.select_type:查询中每个se ...

  8. TCP的三次握手和四次挥手，为什么？

    首先,我们要知道TCP是全双工的,即客户端在给服务器端发送信息的同时,服务器端也可以给客户端发送信息.而半双工的意思是A可以给B发,B也可以给A发,但是A在给B发的时候,B不能给A发,即不同时,为半双 ...

  9. 在PCL中如何实现点云压缩(1)

    点云由庞大的数据集组成,这些数据集通过距离.颜色.法线等附加信息来描述空间三维点.此外,点云能以非常高的速率被创建出来,因此需要占用相当大的存储资源,一旦点云需要存储或者通过速率受限制的通信信道进行传 ...

  10. 9、perldoc文档阅读器

    转载:http://www.cnblogs.com/nkwy2012/p/6016320.html 一般来说,将文档的名称作为参数传递给perldoc命令,即可查阅该文档.比如下面,给定文档名称per ...