Python學習第224課——html表單

2020-12-04 石問新

上節我們學習了a標籤,通過它可以把網際網路上的各個網頁連接起來,點擊超連結可以跳轉到一個新的網頁,也就是說,通過超連結我們可以在靜態網頁上進行簡單的交互。

這節我們學習html中另一個具有交互作用的元素--表單。

我們在登錄一個網站的時候,需要輸入帳號密碼,這個區域其實就是用表單元素實現的。我們作為用戶輸入帳號密碼驗證碼之後,這些輸入的數據就會提交到伺服器的資料庫,然後伺服器會把資料庫中保存的你的帳號密碼跟你這次輸入的帳號密碼進行比較,如果一樣,就登陸成功,如果不一樣就登錄失敗。

●html表單

表單是一個包含表單元素的區域。

表單標籤是<form></form>。form這個單詞本身就有表格的意思。

<form>標籤裡面是是允許用戶輸入內容的標籤,用的最多的是input標籤,input標籤上面有一個type屬性,這個屬性規定了input標籤的類型。input標籤的主要類型如下:文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

●html表單的格式

一個表單大概是下面這樣的格式:

<form>

...

input元素

...

</form>

在表單中,form標籤是父元素,input標籤寫在form標籤裡面,是子元素。

之前我們寫了一個叫my first html.html的網頁,我們接下來還是在之前的基礎上寫新的代碼,來演示下表單的效果。

代碼如下圖所示:

我把form表單的代碼貼出來:

<form action="" method="">

請輸入帳號:<input type="text" name="" id=""><br/>

請輸入密碼:<input type="password" name="" id=""><br/>

請選擇出生日期:<input type="date" name="" id=""><br/>

請選擇性別:<br/>

男<input type="radio" name="sex" id=""><br/>

女<input type="radio" name="sex" id=""><br/>

陰陽人<input type="radio" name="sex" id=""><br/>

你喜歡的樂器是:<br/>

薩克斯<input type="checkbox" name="" id="">

鋼琴<input type="checkbox" name="" id="">

大提琴<input type="checkbox" name="" id="">

吉他<input type="checkbox" name="" id="">

架子鼓<input type="checkbox" name="" id="">

笛子<input type="checkbox" name="" id="">

排簫<input type="checkbox" name="" id="">

古箏<input type="checkbox" name="" id="">

</form>

注意:

為了代碼好看點,我特意在排版時換了行,我們說html對代碼的格式要求不是很嚴格,你的html代碼在排版時縮進不縮進,換行不換行,都不會影響網頁的效果,也不會報錯。你的代碼在編輯器裡面排版的時候,按回車換行,只是在編輯器裡面你看到換行了,實際上網頁上並不會換行。別人用編程工具打開你的代碼,看到的也是你代碼原來排版的樣子,所以你在編輯器裡面不注意縮進和排版的話,代碼太亂,非常難看,不利於自己和別人閱讀。

如果你想換行,你必須要用具有換行屬性的html元素或者用<br/>標籤。

補充說明:

我們看到我這裡寫的form標籤有兩個屬性action和method。

action是規定提交表單時向何處發送表單數據。

method是規定用於發送表單數據的 HTTP 方法,有get和post兩種方法,現在先了解就行。

form標籤還有其他的屬性,不過用的比較多的是action和method,它們是跟後端進行交互的屬性,我們現在是學前端的東西,所以這兩個屬性目前我們知道就行了。後面跟後端聯繫起來的時候,我們再去用它們。

input標籤的type屬性就是input的類型,有很多種,上面我寫了5種,分別是text、password、date、radio、checkbox。

input標籤的不同的type值就代表不同類型的input表單。

text就是文本類型的輸入表單,在瀏覽器上的效果是一個空白的輸入框。

password就是用來輸入密碼的表單,在瀏覽器上的效果也是一個空白的輸入框,當我們在框裡面輸入密碼時,輸入的密碼字符會以星號或者圓點替代。

date是一個可以選擇日期的控制項。

在瀏覽器上點擊這個控制項是如下圖所示的效果:

radio是單選框,在瀏覽器上是一個圓形的按鈕,用滑鼠點擊它會選中它。既然是單選框,就好比是我們做單選題一樣,4個答案我們只能選一個,radio也是為了實現這樣的效果,為了實現這種效果,必須給每一個單選框的name屬性給相同的值,比如我這裡是為了選擇性別,所以我給3個單選框的name屬性的值都是sex,也就是說,同名的單選框會互斥,選中一個,其他的都不會被選中。

checkbox是複選框,在瀏覽器上的效果是正方形的按鈕,用滑鼠點擊它會選中它。複選框就好比是多選題,可以選中多個按鈕。

input元素的name 屬性用於對提交到伺服器後的表單數據進行標識,或者在客戶端通過 JavaScript 引用表單數據。只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

我們保存vscode中的代碼,然後在瀏覽器打開my first html.html這個網頁,效果如下:

自己動手實踐一下,然後在瀏覽器中可以輸入帳號、密碼,點一點日期的input按鈕、單選框和複選框,體驗一下。

相關焦點

  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!我們一起來看看吧!
  • Python學習第227課——html的head及meta簡介
    前面我們學習了html網頁的結構以及簡單的網頁的編寫,我們知道,瀏覽器裡面顯示的網頁上,我們能看到的東西,其實都是body裡面的元素。這節我們再簡單的了解下html結構中的head。DOCTYPE html>開頭的,這個開頭的作用就是"聲明這是一個網頁html文件",以便瀏覽器去解析。第二行代碼<html lang="en">就表示這個網頁文件的代碼是以英文進行編寫的文件。接下來就是head標籤以及它裡面的元素。
  • 由淺入深地聊聊html的表單
    今天和大家分享學習一下html的表單一、HTML標籤:表單標籤表單的概念:用於採集用戶輸入的數據的。用於和伺服器進行交互。1、form表單標籤他是用於定義表單的,本身並沒有什麼樣式,可以定義一個範圍,範圍代表採集用戶數據的範圍,通俗易懂的說就是 被他包裹的數據可以被提交給伺服器。
  • 「Flask web 開發」第4章 Web表單
    第 4 章 Web表單第 2 章中介紹的請求對象包含客戶端發出的所有請求信息。其中, request.form 能獲取POST 請求中提交的表單數據。儘管 Flask 的請求對象提供的信息足夠用於處理 Web 表單,但有些任務很單調,而且要重複操作。比如,生成表單的 HTML 代碼和驗證提交的表單數據。
  • HTML表單標籤基礎
    HTML表單一、傳統表單(一)1、表單是什麼?01.在網頁中主要負責數據採集功能的組件。02.通常與資料庫相連。03.由表單元素組成。2、表單組件介紹:01.文本(欄位)02.選擇03.單選按鈕(組)04.文本域05.複選框06.密碼(欄位)07.文件域08.提交按鈕09.重置按鈕3、form 標籤 (表單範圍)...
  • 學習網頁製作並不難,HTML菜鳥教程,從這裡開始第一課學習
    很多朋友想學一下網頁製作,上網一看,只要涉及到網頁製作,都離不開HTML這個詞語,HTML是HyperText Markup Language的簡稱,想學習HTML語言,先得了解一些基本知識,今天這邊內容可以作為學習HTML的菜鳥教程第一課。
  • Python學習第76課-git reset——hard
    【每天幾分鐘,從零入門python編程的世界!】學習git到現在,你可能會覺得,用git這麼麻煩,還不如用另存為version1、version2、version3這樣的文件,這種傳統的方法方便。git前期學習你可能覺得非常慢,但是一旦掌握它之後,你的效率將得到飛速的提升。隨著時間的推移,我們在工作區的文件有可能會發生各種意外的狀況,比如中病毒了,或者被人進行了惡意修改,或者經過多人之手,被改的面目全非,如果我們用git進行過版本控制和提交,就一點都不用怕。因為我們可以通過git reset --hard命令回到最後一次提交的正常的運行版本。
  • 初學者如何用「python爬蟲」技術抓取網頁數據?
    網絡爬蟲,也叫作網絡數據採集,是指通過編程從Web伺服器請求數據(HTML表單),然後解析HTML以提取所需的數據。想要入門Python 爬蟲首先需要解決四個問題:1.熟悉python編程2.了解HTML3.了解網絡爬蟲的基本原理4.學習使用python爬蟲庫1、
  • Python開發簡單爬蟲【學習資料總結】
    Python網頁解析器 正則表達式 html.parser Beautiful Soup lxml 後面三種是以結構化解析的方式進行解析DOM(Document Object Model
  • Python學習第237課——從win10主機傳文件到VirtualBox並用Python...
    這時虛擬機就相當於一臺伺服器,由於我是把hexiaozhi這個文件夾直接拖到虛擬機的桌面的,所以我們把目錄切換到hexiaozhi裡面,使用命令:cd Desktop/hexiaozhi然後ls一下,就能列出裡面的文件,如下圖:然後我們輸入下面的命令來搭建伺服器:python3
  • Python學習第117課——numpy中dot的運用舉例
    【每天幾分鐘,從零入門python編程的世界!】上節我們學習了最基礎的matrix的運算,可能有小夥伴覺得這都要涉及高等數學知識了,確實如果你想做數據科學、做人工智慧,統計學、概率論等數學知識,尤其是算法是繞不過去的坎,但是不要怕!!!
  • 教你學習:Python-100-Days-01
    教你學習:Python-100-Days-01 本項目是參考項目內容,進行個人理解,和原有項目有出入,如想了解詳情,請自行百度去搜索項目為什麼用Python?python是腳本語言,學習簡單。包含很多環境的數學包,可以簡化我們的開發,方便我們數學計算。未來是數據的時代,java和python是必須要會的語言,是人工智慧和大數據的基礎。
  • Python學習步驟
    Python10大特點:易於學習:Python有相對較少的關鍵字,結構簡單,和一個明確定義的語法,學習起來更加簡單。易於閱讀:Python代碼定義的更清晰。【基礎篇】Python基礎 【提高篇】Python深入和擴展【擴展篇】網絡編程、多線程、擴展庫【高手篇】算法、Python源碼、函數式編程、手工實現神經網絡第一階段python開發基礎和核心特性
  • Python最佳經典學習路線
    如何學習Python python語言基礎:(帶你熟悉python語言的特性,學會使用python開發環境,使用python開發一些簡單的案例) (1)Python3入門,數據類型,字符串 (2)判斷/循環語句,函數,
  • python初學者必看的學習路線 Python是近幾年比較火的程式語言
    Python是近幾年比較火的程式語言之一,因為人工智慧的火爆,讓很多人都想從事python開發。很多零基礎學員在學習python的時候都會走一些彎路,下面小編就為大家分享python學習路線圖,幫助零基礎學員在學習的時候少走彎路。 很多人都在問Python學習步驟應該如何安排?
  • 看綜藝是為了學爬蟲,最後居然搞的深度學習,這Python課也是絕了
    普通Python學習讓人倦同學們,這次我們要學習用Python來做爬蟲,爬取的是深度學習的訓練資料。估計這麼一說,大部分同學是這樣的。少部分同學可能覺得爬蟲和深度學習比較時髦,還能硬著頭皮來聽講,但心裡肯定直打鼓,「這肯定是從入門到放棄吧?」
  • 簡單表單實現
    網站上一般都有登錄、註冊、評論什麼的,這裡就需要form表單來處理了常用的表單標籤有:form:表單容器input:輸入控制項select:代碼使用是fieldset(控制項組) 、 legend(說明)標籤和br(break 換行標籤),這兩個閉合標籤主要用來做輔助使用的checked用來處理單選和複選的默認選中,name名稱需要一樣selected用來處理下拉選擇的默認選中,name是一個數組,名稱也需要一樣reset表單內容重置
  • Python學習第116課——numpy.dot和矩陣相乘的數學運算
    【每天幾分鐘,從零入門python編程的世界!】關於numpy中數組的相乘,我們學習了對位相乘(用numpy.multiply、或*直接相乘,比如數組a和b的對位相乘就是numpy.multiply(a,b)或a*b)和一維數組的點乘(dot product,也有人叫inner product,比如一維數組a和b的點乘就是a.b)。numpy中的點乘就是numpy.dot。對於二維以上的數組的點乘,就會用到矩陣相乘。
  • Python學習第233課——css中的長度單位
    我們還是在my first html.html這個文件中的代碼的基礎上進行舉例。如上圖所示,我們有一個p元素,這個p元素的內容是"你好!"。我們之前並沒有給它設定寬高,現在我們在css裡面給它設定寬高。
  • 零基礎學習python,這幾本書少不了
    目前,社會上已經掀起了一波學習python的熱潮,但是很多人由於並沒有python基礎,不知道從哪裡開始學習,小編今天整理了零基礎學習python的一些書籍,希望對大家有所幫助。1.《"笨辦法"學Python》推薦理由:本書是一本python入門書籍,比較適合沒有計算機、編程基礎,但是對python感興趣的小白學習使用。這本書是以習題的方式一步一步引導讀者了解、學習python,從簡單的列印一直講到完整項目的實踐,讓初學者從基礎的python知識入手,最終體驗到軟體開發的基本過程。