day51 表格与表单
一、表格标签
<table border="1" cellpadding="5"> # border表示表格边框宽度，cellpadding表示内含文本距离边框的单位 块级标签 里面其他的是行内标签
<thead># 表头
<tr> # tr表示一行 th、td是一个单位
# <!--<td></td>-- th td ,th比td加粗一点，用啥都行-->
<th>账号</th>
<th>密码</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>黄钊</td>
<td>123</td>
<td>xxx</td>
</tr>
<tr>
<td>李肖彤</td>
<td>123</td>
<td>xxx</td>
</tr>
</tbody>
</table>
二、表单标签
功能：能够回去前端用户的数据，基于网络发送给后端
<form action=""></form>
'''
这个form标签内供用户书写的数据会被这个表单提交给action的后端
action：控制数据提交的后端路径（服务端）
1.什么都不写，默认给当前页面的url提交数据
2.写路径全称：https://www.baidu.com 朝百度服务端提交
3.直接路径后缀：/index/
会自动拼接到当前页面ip+端口后=》》》ip+port/index/
method：控制请求方式
默认：get
虽然能携带数据，但是数据是在url后面的，不安全且小
post请求
携带数据放在请求体里面（表单提交必须修改post）
enctype 控制数据的编码格式
默认：urlencoded 只能发送普通文本，文件只能接收文件名
修改为formdata可以接收文件
'''
1 form内最重要的就是input标签，它通过type变形
- text：普通文本
- passowrd：密文
- date：有下拉框可选择的日期
- submit：用来触发表单的提交数据，按钮
- button：本身没有功能，可以后期添加，按钮
- reset：重置内容，按钮
- radio：单选
- 相同name的input标签属于同一单选内容
- 单选是必须选，不能取消只能选别的
- 后面加checked = “checked” 表示默认值，当属性值和属性名相同时可以简写只写属性名
- checkbox：多选
- 不需要指定相同name
- 可以取消可以不选，可以全选，默认值可以设置多个
- file：获取文件
- 后跟multiple表示可以多选，默认单选
ps：在文本框后加placeholder可以给文本框添加默认值
- 后跟multiple表示可以多选，默认单选
2 select标签
默认单选，后加multiple变成多选，selected表示默认值
<select name="" id="" multiple>
<option value="" selected>a</option>
<option value="">b</option>
<option value="">c</option>
</select>
3 textarea标签
大段文本框
<textarea name="" id="" cols="30" rows="10"></textarea>
# cols 宽度 rows 长度
4 重点
# 能触发form表单数据提交的按钮
1、<input type="submit" value="注册">
2、<button>点我</button>
# 用户输入的数据在后端获取到的是一个个kv键值对
# 所以在前端书写的时候每个用户书写的标签都要加上name 等于key 用户的数据 等于value
三、通过flask实现表单提交
服务端代码
from flask import Flask,request
app = Flask(__name__)
@app.route('/hz/',methods=['GET','POST'])
def hz():
print(request.form)
print(request.files)
file_obj = request.files.get('mytupian.pug')
file_obj.save(file_obj.name)
return 'hznb'
app.run()
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:5000/hz/" method="post" enctype="multipart/form-data">
<label for="d1">
姓名：<input type="text" id="d1" name = "姓名">
</label>
<label for="d2">密码</label>
<input type="password" id="d2" name="密码">
<!--单选 指定相同name才是一类单选-->
<p>
<input type="radio" name="sex" checked value="男">男
<input type="radio" name="sex" value="女">女
</p>
<!--多选 不用指定name -->
<p>
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
</p>
<p>
<!-- multiple表示可以多选-->
<input type="file" multiple name = 'file'>
<input type="file" >
</p>
<p>
<select name="" id="" multiple name="select">
<option value="" selected value="a">a</option>
<option value="" value="b">b</option>
<option value="" value="c">c</option>
</select>
</p>
<p>
<textarea name="" id="" cols="30" rows="5"></textarea>
</p>
<p>
<input type="date">
</p>
<p>
<input type="submit">
<input type="button" value="button">
<input type="reset">
<button></button>
</p>
</form>
</body>
</html>
四、css
1 css的三中引入方式
直接在head里通过style写
<style>
选择器{
属性：值
}
</style>
通过link标签引入css文件（最正规）
<link rel="stylesheet" href="mycss.css">
行内式（一般不用）
<h1 style="color: green">老板好 要上课吗?</h1>
2 css选择器
- id选择器：对指定id的标签修改
id{ }
- 类选择器：对指定类的标签修改
- .class{ }
- 元素/标签选择器：对指定标签修改
- span{ }
- 通用(全局)选择器：全局修改
- *{}
3 组合选择器
- 后代选择器
- div span{ } div下所有的span标签
- 儿子选择器
- div>span{ } div下直系span标签（单层嵌套）
- 毗邻选择器
- div+span{ } div同级别的第一个span
- 弟弟选择器
- div~span{ } div同级别的所有span
4 属性选择器
- 含有某个属性
- [username] { 对所有有username属性的标签修改}
- 含有某个属性且有对应的值
- [username = 'hz']{ 对所有username=‘hz’的标签修改}
- 含有某个属性且有对应的值的特定标签
- input[username = 'hz'] { 对所有username=‘hz’的input标签修改}
day51 表格与表单的更多相关文章
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...
- css011 表格和表单的格式化
css011 表格和表单的格式化 一. 让表格专司其职 Html中创建一个三行三列的表格 <table> <caption align="bottom" ...
- BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- 第3天：CSS浮动、定位、表格、表单总结
今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的常用属性: Ø 理解表单的作用 Ø ...
- HTML&CSS精选笔记_表格与表单
表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table> <tr> <td>单元格内的文字</td> ...
- Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单
Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...
- 13、Semantic-UI之表格与表单
13.1 定义基础样式表格 在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...
- 框架，表格，表单元素，css基础以及基本标签的结合
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
随机推荐
- [windows][技巧]百度网盘提示您的电脑已安装百度网盘，是否覆盖，解决方法
目录 故障描述 解决方法 故障描述 解决方法 win+r,输入regedit,进入注册表 依次打开HKEY_CURRENT_USER->Software->Baidu->BaiDuY ...
- 1.Go 开始搞起
link 1. IDE Go Land 服务器激活 2. 资源 中文网站 翻译组 翻译组wiki 待认领文章 入门指南 中文文档 fork 更新 github 中如何定期使用项目仓库内容更新自己 fo ...
- v-else-if（v-show)
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-el ...
- (二)JPA实体类主键生成策略
在JPA中,配置实体类的主键的生成策略使用 @GeneratedValue @Id @Column(name = "id") @GeneratedValue(strategy = ...
- （三）MySQL基础查询（起别名、去重）
资料下载请前往:链接 补充内容: 1.数据库基本结构: 2.在sqlyog中将myemployees库导入数据库的方法: 右键root@localhost ->选择 执行SQL脚本->选定 ...
- Andrew Ng - 深度学习工程师 - Part 1. 神经网络和深度学习（Week 3. 浅层神经网络）
=================第3周 浅层神经网络=============== ===3..1 神经网络概览=== ===3.2 神经网络表示=== ===3.3 计算神经网络的输出== ...
- 对select函数的理解
对select函数的理解 1. 处理多个socket链接的方法 阻塞模式下服务端要解决多个客户链接的问题的3个思路: 每个客户端的socket对应一个内核线程,在这个线程内部进行阻塞的read 单线程 ...
- Beta冲刺<9/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第九天(05.27) 作业正文 如下 其他参考文献 ... B ...
- TestNG离线安装步骤
1.下载testNG 离线安装包[eclipse-testng离线包],并解压.资源可以在下载:http://download.csdn.net/detail/u012100968/9623613: ...
- 阿里巴巴--java多线程的两种实现方式，以及二者的区别
阿里巴巴面试的时候,昨天问了我java面试的时候实现java多线程的两种方式,以及二者的区别当时只回答了实现线程的两种方式,但是没有回答上二者的区别: java实现多线程有两种方式: 1.继承Thre ...