form表單的常用標籤以及簡單應用

2021-10-08 09:33:34 字數 2755 閱讀 7805

action="/login" : 表示設定表單提交資料時,後台接收的url(介面)

method=「get」: 提交表單資料的方式(請求後台介面的方法);get,post.

下來詳細區別get,post。

獲取資料位址列可見

提交資料隱藏 可提交大量資料

表單要上傳檔案,則必須是post請求。enctype=「multipart/form-data」

name=「myform」: 表單的名稱

input標籤的標籤屬性:

type: 指定乙個值,表示是什麼型別的表單元素。

text: 單行文字輸入框

value:是控制傳入伺服器的值

password: 密碼輸入框

placeholder:提示語

submit: 提交按鈕

value:有預設值的時候使用

maxlength=「10」:最多限制長度(中英文同數),與大小容量沒有關係,只是限制能輸入多少個東西,不限制究竟是什麼東西。

reset: 重置按鈕

radio單選框,設定繫結,這裡的value是設定給伺服器的值。這裡的name的意義在將選的值與提交的東西串起來。

autofocus:自動獲取焦點(自動獲取游標)

使用者名稱

可以用布林值可以直接寫屬性名。

checkbox: 多選

file: 檔案上傳

-------------------html5新增的型別-----------------

color: 顏色

datatime: 日期時間

week: 周

month: 月

name: 表單域的名稱

placeholder: 提示資訊

value: 預設值,或提交到後台的值,如果是submit,reset的型別時,value就是按鈕的名稱。

button標籤:

type="button, reset,submit" 

註冊 --> ajax來實現後台請求

單選框: radio

每乙個標籤的name屬性的值,必須是相同。

使用把和文字一起包括起來。

checked=「checked」:設定單選框預設選中項。

多選框: checkbox

name: 可以是同乙個名字,也可以不同。一般 同名。

value: 提交到後台的值;

checked: 設定為預設選中。

配合,提公升使用者體驗。

檔案上傳:

file: 檔案上傳

列表與下拉列表:

高新

武侯錦江

這裡的value提交使用數字,這個數字是這個地區對應的id.(一定不能寫中文)

selected 預設被選中

value: 提交到後台的值;

之間的文字,就是給使用者看的。下拉項的文字 selected="selected": 設定為預設選中。

當是列表時:

size=「4」: 表示同時顯示的option的數量;

multiple=「multiple」: 允許使用者按ctrl 不放,進行多項選擇。

多行文字輸入框(多行文字域)

rows: 行數,控制高度

cols: 列數,控制寬度

name=「info」

id=「info」 css選擇器

lable標籤

關聯標籤

form

action=""這裡是伺服器位址 method=""是提交的方式

type屬性控制顯示出來的是何種型別

使用者名稱

密碼

按鈕

button這個便簽 在from表單標籤裡面有預設提交的功能,但是在from標籤外面就是乙個單純的按鈕。

可以通過控制type來控制這個button的功能。

提交

使用者名稱

密碼

游泳攝影旅遊

想吃的水果

蘋果香蕉葡萄

提交

form 表單標籤

作用 表單目的是為了收集使用者資訊。在我們網頁中,我們也需要跟使用者進行互動,收集使用者資料,此時也需要表單。在html中,乙個完整的表單通常由表單控制項 也稱為表單元素 提示資訊和表單域3個部分構成。包含了具體的表單功能項,如單行文字輸入框 密碼輸入框 核取方塊 提交按鈕 重置按鈕等。乙個表單中通...

form表單中的標籤

1 文字域 當使用者要在表單中鍵入字母 數字等內容時,就會用到文字域。2 單選按鈕 當使用者從若干給定的的選擇中選取其一時,就會用到單選框。3 核取方塊 當使用者需要從若干給定的選擇中選取乙個或若干選項時,就會用到核取方塊。2 下拉列表 select 元素可建立單選或多選選單。3 文字框 標籤定義多...

form表單域和表單標籤

在html中,form標籤被用於定義表單域,以實現使用者資訊的收集和傳遞,form中的所有內容都會被提交給伺服器。屬性值 value 你好 通過textarea控制項可以輕鬆地建立多行文字輸入框.cols 每行中的字元數 rows 顯示的行數 我們實際開發不用 選項1 option 選項2 opti...