碼上快樂

相關內容    簡體    繁體

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

通過瀏覽器訪問http://127.0.0.1:8090/smoke

templates目錄

Index.html

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

通過瀏覽器訪問http://127.0.0.1:8090/smoke

 

templates目錄

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello girl</h1>
<form>
    <p>用戶名：<input type="text" name="username"></p>
</form>
</body>
</html>

通過瀏覽器訪問http://127.0.0.1:8090/smoke

templates目錄

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello girl</h1>
<form>
    <p>用戶名：<input type="text" name="username" value="user"></p>
</form>
</body>
</html>

通過瀏覽器訪問http://127.0.0.1:8090/smoke

templates目錄

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello girl</h1>
<form action="http://127.0.0.1:8090/smoke/" method="get">
    <p>用戶名：<input type="text" name="username"></p>
    <p>密 碼：<input type="password" name="pwd"></p>
    <p>性 別：男<input type="radio" name="sex" value="0"></p>
    <p>      女<input type="radio" name="sex" value="1"></p>
    <p>愛 好：籃球<input type="checkbox" name="hobby" value="bsk"></p>
    <p>      足球<input type="checkbox" name="hobby" value="football"></p>
    <p><input type="submit" value="發送"></p>
</form>
</body>
</html>

通過瀏覽器訪問http://127.0.0.1:8090/smoke

app01目錄

views.py

from django.shortcuts import render

# Create your views here.

def smoke(req):
    print('前端數據',req.GET)

    return render(req,"index.html")

通過瀏覽器訪問http://127.0.0.1:8090/smoke，填寫完成點擊發送

填寫完成點擊發送

get方式參數被加在url后面發送http://127.0.0.1:8090/smoke/?username=smoke&pwd=smoke520&sex=0&hobby=bsk&hobby=football

查看服務器端打印輸出

(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).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
February 10, 2022 - 13:10:24
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.
前端數據 <QueryDict: {}>
[10/Feb/2022 13:12:19] "GET /smoke/ HTTP/1.1" 200 651
[10/Feb/2022 13:12:50] "GET /smoke?username=smoke&pwd=smoke520&sex=0&hobby=bsk&hobby=football HTTP/1.1" 301 0
前端數據 <QueryDict: {'username': ['smoke'], 'pwd': ['smoke520'], 'sex': ['0'], 'hobby': ['bsk', 'football']}>
[10/Feb/2022 13:12:50] "GET /smoke/?username=smoke&pwd=smoke520&sex=0&hobby=bsk&hobby=football HTTP/1.1" 200 651

通過瀏覽器訪問http://127.0.0.1:8090/smoke?a=1&b=2

 

查看服務器端打印輸出

(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).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
February 10, 2022 - 13:10:24
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.
前端數據 <QueryDict: {}>
[10/Feb/2022 13:12:19] "GET /smoke/ HTTP/1.1" 200 651
[10/Feb/2022 13:12:50] "GET /smoke?username=smoke&pwd=smoke520&sex=0&hobby=bsk&hobby=football HTTP/1.1" 301 0
前端數據 <QueryDict: {'username': ['smoke'], 'pwd': ['smoke520'], 'sex': ['0'], 'hobby': ['bsk', 'football']}>
[10/Feb/2022 13:12:50] "GET /smoke/?username=smoke&pwd=smoke520&sex=0&hobby=bsk&hobby=football HTTP/1.1" 200 651
前端數據 <QueryDict: {'a': ['1'], 'b': ['2']}>
[10/Feb/2022 13:24:32] "GET /smoke/?a=1&b=2 HTTP/1.1" 200 651


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Angular 向后端發送請求 關於form表單或者Ajax向后台發送數據時，數據格式的探究 前端向后端發送請求的方式總結 Ajax向后台發送數據 vue向后端傳遞數據之GET和POST 微信小程序 怎么向后端發送請求？？ springboot前端向后端請求返回html語句 前端向后端發送請求，后端返回的一個值的請求的ajax.get();方法 nodejs做中間層，向后端取數據 nodejs做中間層，向后端取數據
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM