HTML的学习之通过form向后端发送数据

本文转载自查看原文 2022-01-15 21:07 3975 python

五表格标签: <table>

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  单元格竖跨多少行

colspan:  单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.

六表单标签<form>
表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

1.表单属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get 默认取值就是 get（信封）

get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

get/post是常见的两种请求方式.

2.表单元素

<input> 标签的属性和对应值

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data"   

 name:    表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客          户端编程，而在css和javascript中使用的
 value:   表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

?12345type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值　　

 checked:  radio 和 checkbox 默认被选中

 readonly: 只读. text 和 password

 disabled: 对所用input都好使.

在pycharm创建from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
  <input type="text">
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
  姓名：<input type="text">
  性别：<input type="text">
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
  <p>姓名：<input type="text"></p>
  <p>性别：<input type="text"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
  <p>姓名：<input type="text"></p>
  <p>性别：<input type="text"></p>
  <p><input type="submit"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
  <p>姓名：<input type="text"></p>
  <p>性别：<input type="text"></p>
  <p><input type="submit" value="press"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
</form>
</body>
</html>

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p><input type="checkbox" value="press"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" value="press"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" value="press"></p>
  <p>爱好：乒乓球<input type="checkbox" value="press"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" value="press"></p>
  <p>爱好：乒乓球<input type="checkbox" value="press"></p>
  <p>男<input type="radio"></p>
  <p>女<input type="radio"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text"></p>
  <p>密码：<input type="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" value="press"></p>
  <p>爱好：乒乓球<input type="checkbox" value="press"></p>
  <p>男<input type="radio" name="sex"></p>
  <p>女<input type="radio" name="sex"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--{"username":"smoke","password":123}-->
<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" value="press"></p>
  <p>爱好：乒乓球<input type="checkbox" value="press"></p>
<!--name属性是给服务器看的-->
  <p>男<input type="radio" name="sex"></p>
  <p>女<input type="radio" name="sex"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--{"username":"smoke","password":123}-->
<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" name="hobby" value="1"></p>
  <p>爱好：乒乓球<input type="checkbox" name="hobby" value="2"></p>
<!--name属性是给服务器看的-->
  <p>男<input type="radio" name="sex"></p>
  <p>女<input type="radio" name="sex"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--{"username":"smoke","password":123}-->
<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" name="hobby" value="1"></p>
  <p>爱好：乒乓球<input type="checkbox" name="hobby" value="2"></p>
<!--name属性是给服务器看的-->
  <p>男<input type="radio" name="sex" value="0"></p>
  <p>女<input type="radio" name="sex" value="1"></p>
</form>
</body>
</html>

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--{"username":"smoke","password":123}-->
<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" name="hobby" value="1"></p>
  <p>爱好：乒乓球<input type="checkbox" name="hobby" value="2"></p>
<!--name属性是给服务器看的-->
  <p>男<input type="radio" name="sex" value="0"></p>
  <p>女<input type="radio" name="sex" value="1"></p>
  <p>上传<input type="file"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--{"username":"smoke","password":123}-->
<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" name="hobby" value="1"></p>
  <p>爱好：乒乓球<input type="checkbox" name="hobby" value="2"></p>
<!--name属性是给服务器看的-->
  <p>男<input type="radio" name="sex" value="0"></p>
  <p>女<input type="radio" name="sex" value="1"></p>
  <p>上传<input type="file"></p>
  <p><input type="reset"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

点击重置，清空内容

修改from_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--{"username":"smoke","password":123}-->
<form action="127.0.0.1:8090/index" method="get">
  <p>姓名：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>
  <p><input type="submit" value="press"></p>
  <p><input type="button" value="press"></p>
  <p>爱好：篮球<input type="checkbox" name="hobby" value="1"></p>
  <p>爱好：乒乓球<input type="checkbox" name="hobby" value="2"></p>
<!--name属性是给服务器看的-->
  <p>男<input type="radio" name="sex" value="0"></p>
  <p>女<input type="radio" name="sex" value="1"></p>
  <p>上传<input type="file"></p>
  <p><input type="reset" value="reset"></p>
</form>
</body>
</html>

点击pycharm上面的浏览器

新建Django项目

创建的jango框架

jingdong_app目录

urls.py

"""jingdong_app URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('smoke', views.smoke),
]

app01目录

views.py

from django.shortcuts import render

# Create your views here.

def smoke(req):
    return render()

templates目录

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello girl</h1>
<img src="1.jpg">
</body>
</html>

app01目录

views.py

from django.shortcuts import render

# Create your views here.

def smoke(req):
    return render(req,"index.html")

在pycharm终端启动

(venv) smoke@smoke-GS70-2PC-Stealth:~/文档/DocumentFile/PycharmProjects/jingdong_app$ python3.8 manage.py runserver 8090
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

Run 'python manage.py migrate' to apply them.
January 24, 2022 - 12:41:13
Django version 4.0.1, using settings 'jingdong_app.settings'
Starting development server at http://127.0.0.1:8090/
Quit the server with CONTROL-C.
Not Found: /
[24/Jan/2022 12:41:30] "GET / HTTP/1.1" 404 2170
Not Found: /favicon.ico
[24/Jan/2022 12:41:30] "GET /favicon.ico HTTP/1.1" 404 2221

通过浏览器打开127.0.0.1:8090