码迷,mamicode.com
首页 > Web开发 > 详细

前端HTTP整体

时间:2020-05-12 20:03:25      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:单元   enc   csharp   self   mat   disable   char   文字   完成   

表格table

  • 表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

  • 最主要的目的是显示表格类数据

表格类数据

  • 最适合以行列来排布的数据

表格的基本结构

<table>
    <thead>	<!--表头(字段信息)-->
    	<tr>
            <!--th:加粗文本-->
            <th>序号</th>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>	<!--表单(数据信息)-->
    	<tr> <!--行-->
            <!--td:正常文本-->
        	<td>1</td> <!--列-->
            <td>Yumi</td>
            <td>追番</td>
        </tr>
        <tr>
        	<td>2</td>
            <td>jason</td>
            <td>美女</td>
        </tr>
    </tbody>
</table>

<!--
属性:
    border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距.
    width: 像素 百分比.(最好通过css来设置长宽)
    rowspan: 单元格竖跨多少行
    colspan: 单元格横跨多少列(即合并单元格)
-->

  

表单form

表单的功能

  1. 用于向服务端发送数据,实现用户与web服务器的交互
  2. 表能能够包含input系列标签,例如文本字段、复选框、单选框、提交按钮等
  3. 表单还可以包含textareaselectfieldset和 label标签

 

表单属性

属性描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

 

表单元素

input元素

type属性值表现形式对应代码
text 单行输入文本 <input type=text" />
password 密码输入框
date 日期输入框
checkbox 复选框
radio 单选框
submit 提交按钮
reset 重置按钮
button 普通按钮
hidden 隐藏输入框  
file 文本选择框
<!--
 属性说明:
    name:表单提交时的“键”,注意和id的区别
    value:表单提交时对应项的值
    type="button", "reset", "submit"时,为按钮上显示的文本年内容
    type="text","password","hidden"时,为输入框的初始值
    type="checkbox", "radio", "file",为输入相关联的值
    checked:radio和checkbox默认被选中的项
    readonly:text和password设置只读(可以向后端传数据)
    disabled:所有input均适用(禁用,设置后对应的input不可以向后端传数据)
-->

 

select标签

<!--下拉框-->
<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

<!--
属性说明:
    multiple:布尔属性,设置后为多选,否则默认单选
    disabled:禁用,禁用后表单无法向后端传输该数据
    selected:默认选中该项
    value:定义提交时的选项值
-->

  

label标签

定义:

  • label 标签为 input 元素定义标注(标记)。

说明:

  • label 元素不会向用户呈现任何特殊效果。
  • label 标签的 for 属性值应当与相关元素的 id 属性值相同。
    <!--
    label标签本身不会产生任何特殊效果,通常与input一起使用
    用来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和该标签相关的表单控件上。
    -->
    <form action="">
        <!--方式一-->
        <!--当用户点击用户名时,焦点会自动转到input输入框上-->
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <!--方式二-->
        <label for="username">用户名:
            <input type="text" id="username" name="username">
        </label>
    </form>

 

textarea多行文本

<!--textarea标签:文本域标签-->
<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

<!--
属性说明:
    name:名称
    rows:行数
    cols:列数
    disabled:禁用
-->

  

验证form表单提交数据

# 能够出发form表单提交数据的按钮
‘‘‘
1、<input type="submit" value="注册">
2、<button>点我</button>
‘‘‘

# 所有获取用户输入的标签 都应该有name属性
‘‘‘
	后端会通过name来获取前端表单提交的数据
	name就类似于字典的key
  	用户的数据就类似于字典的value
	<p>gender:
		<input type="radio" name="gender" value="male">男
		<input type="radio" name="gender" value="female">女
	</p>
‘‘‘

# 偷窥后端框架的基本使用(flask)
‘‘‘
环境准备:pip install Flask
‘‘‘

# 后端
from flask import Flask,request

app = Flask(__name__)


# 设置路由,methods不设置则默认只能支持get请求
@app.route(‘/index/‘, methods=[‘GET‘,‘POST‘]) 
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    print(request.files)  # 获取文件数据
    file_obj = request.files.get(‘photo‘) # 获取对应文件数据
    file_obj.save(file_obj.name) # 保存文件数据
    return ‘OK‘

app.run()

  

<!--
# 前端
"""
form表单提交文件需要注意
	1.method必须是post
	2.enctype="multipart/form-data"
		enctype类似于数据提交的编码格式
			默认是urlencoded 只能够提交普通的文本数据
			formdata 就可以支持提交文件数据
"""
-->

    <h1>注册页面</h1>
    <!--在该form标签内部书写的用户数据都会被form标签提交给后端-->
    <!--
        action:表单提交的后端路径
            1.什么都不写  默认就是朝当前页面所在的url提交数据
            2.写全路径:https://www.baidu.com  朝百度服务端提交
            3.只写路径后缀action=‘/index/‘
    -->
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
        <p>
            <label for="id">序号:</label>
            <input type="text" id="id" disabled value="1"> <!--readonly-->
        </p>
        <p>
            <label for="user">用户名:</label>
            <input type="text" id="user">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" id="password">
        </p>
        <p>性别:
            <input type="radio" name="gender" value="male" checked>男
            <input type="radio" name="gender" value="female">女
        </p>
        <p>
            <label for="birth">出生日期:</label>
            <input type="date" id="birth" name="birth">
        </p>
        <p>爱好:
            <input type="checkbox" name="hobby" value="read">阅读
            <input type="checkbox" name="hobby" value="animation" checked>动漫
            <input type="checkbox" name="hobby" value="running">跑步
        </p>
        <p>
            <label for="photo">上传头像:</label>
            <input type="file" id="photo" name="photo">
        </p>
        <p>所在地:
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh" selected>上海</option>
                <option value="sz">深圳</option>
            </select>
        </p>
        <p>
            <label for="about_me">自我介绍:</label>
            <textarea name="about_me" id="about_me" cols="20" rows="10" maxlength="20"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="提交">
            <input type="button" name="btn" value="按钮">
            <input type="reset" name="reset" value="重置">
        </p>
    </form>

  

 

前端HTTP整体

标签:单元   enc   csharp   self   mat   disable   char   文字   完成   

原文地址:https://www.cnblogs.com/Tornadoes-Destroy-Parking-Lots/p/12878243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!