表单和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. linux-常用指令2

    命令链接符                                                                                               ...

  2. flex 和bison的安装和使用

    1.在ubutu上安装 yacc的命令: sudo apt-get install flex bison flex:词法分析器 flex是一个词法分析器.用来将一个.l文件生成一个.c程序文件.即生成 ...

  3. type_traits.h

    type_traits.h // Filename: type_traits.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: ht ...

  4. 浅谈java中replace()和replaceAll()的区别

    replace和replaceAll是JAVA中常用的替换字符的方法,它们的区别是: 1)replace的参数是char和CharSequence,即可以支持字符的替换,也支持字符串的替换(CharS ...

  5. [原]NYOJ-小光棍数-458

    大学生程序代写 /http://acm.nyist.net/JudgeOnline/problem.php?pid=458 *题目458题目信息运行结果本题排行讨论区小光棍数 时间限制:1000 ms ...

  6. bzoj 4815 小Q的表格 —— 反演+分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4815 思路就和这里一样:https://blog.csdn.net/leolyun/arti ...

  7. centos 6 rsync+inotify 实时同步

    主机名.ip: server 172.31.82.184 client  172.31.82.185 需求: 1.server端 ”/data/server“ 做为client端 “/data/cli ...

  8. mac下无法远程桌面连接win10的解决办法

    原文链接:http://www.hangge.com/blog/cache/detail_899.html 原来在Mac OSX下远程win7系统很正常,后来把windows系统升级成了win10,再 ...

  9. Poj 2350 Above Average（精度控制）

    一.Description It is said that 90% of frosh expect to be above average in their class. You are to pro ...

  10. Erlang generic standard behaviours -- gen_server noblock call

    在Erlang 系统中,经常需要gen_server 进程来处理共享性的数据,也就是总希望一个gen_server 进程来为多个普通进程提供某种通用性的服务,这也是gen_server 设计的初衷.但 ...