html中的from標籤有什麼用

在html中，from標籤用於建立供使用者輸入的HTML表單（表單域），以實現使用者資訊的收集和傳遞，form中的所有內容都會被提交給伺服器；語法「<form action="提交地址" method="提交方式" name="表單名稱">表單控制元件</form>」。form表單中可包含一個或多個表單元素，比如input、select、textarea。

前端（vue）入門到精通課程：進入學習

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

html5 form標籤

作用：form標籤用於建立供使用者輸入的HTML表單（表單域），以實現使用者資訊的收集和傳遞，form中的所有內容都會被提交給伺服器。

form表單域中可以包含各種互動控制元件--控制元件標籤（文字欄位、核取方塊、單選框、提交按鈕等等），比如< input>、< button>、< select>、< textarea>等標籤。

<form>標籤語法格式

<form action="提交地址" method="提交方式" name="表單名稱">
  各種表單控制元件
</form>

• name：只是給該表單命名，用於js技術使用。

• action：設定表單資料提交給哪個檔案，用於後端技術（比如php）來接受並處理資料

• method: 設定資料提交方式，用於根據不同的資料需求來選擇合適的提交（傳送）方式

method提交方式常用的4種：

get    		一般用來查詢資訊
post		一般用來新增資訊
put      	一般用來修改資訊
delete		一般用來刪除資訊

post和get區別：

• 資料提交方式，get把提交的資料url可以看到，post看不到

• get一般用於提交少量資料，post用來提交大量資料

• get最多提交1K資料，post理論上沒有限制

• get提交的資料在瀏覽器歷史記錄中，安全性不好

一個完整的表單包含三個基本組成部分：表單標籤、表單域、表單按鈕。

1、表單標籤

是指form標籤本身，它是一個包含表單元素的區域，使用定義

2、表單域

是標籤中用來收集使用者輸入的每一項，通常用input標籤來定義，input標籤有不同的型別，對應使用者不同的資料。（比如：文字域、下拉選單、單選框、核取方塊等等）

3、表單按鈕

用來提交表單中的所有資訊到伺服器

*表單域和表單按鈕都屬於表單元素。

單行文字方塊<input type="text" >預設值是type="text"

密碼框<input type="password"/>　

無線電鈕<input type="radio" name=""/>

核取方塊<input type="checkbox"/>

隱藏域<input type="hidden"/>

檔案上傳<input type="file"/>

下拉框<select>標籤

多行文字<textarea></textarea>

提交按鈕<input type="submit"/>

普通按鈕<input type="button"/>

重置按鈕<input type="reset"/>

控制元件標籤：

input標籤

• input 輸入的意思
• <input />標籤為單標籤
• type屬性設定不同的屬性值用來指定不同的控制元件型別
• 除了type屬性還有別的屬性

type="text"為普通輸入框 value為裡面的值 name和id會在寫js的時候用

    <form action="url地址" method="提交方式" name="表單名稱">
        <input type="text" name="" id="" value="你好">
    </form>

input標籤的一些屬性:

checked屬性只有單選框和核取方塊才有

密碼框

<input type="password" name="" id="" value="">

單選框

name相同的單選框智慧選擇一個

        男 <input type="radio" name="gender" id="" value=""> 
        女 <input type="radio" name="gender" id="" value="">

核取方塊

多選框可以選取多個

        愛好： <br> 
        抽菸<input type="checkbox" name="hobby" id="" value=""> 
        喝酒<input type="checkbox" name="hobby" id="" value=""> 
        燙頭<input type="checkbox" name="hobby" id="" value="">

按鈕

普通按鈕可以根據需求來用js新增功能

提交按鈕會把輸入的表單資訊提交到form表單的action地址

重置按鈕會把表單資訊重置為預設

    <form action="url地址" method="提交方式" name="表單名稱">
        <input type="button" name="" id="" value="我是一個普通按鈕">
        <input type="submit" name="" id="" value="我是一個提交按鈕">
        <input type="reset" name="" id="" value="我是一個重置按鈕">
    </form>

下拉框標籤

下拉框標籤有點特殊，不是input的屬性而是一個單獨的標籤

        <select name="省市區" id="">
            <option value="">山東</option>
            <option value="">北京</option>
            <option value="">江蘇</option>
            <option value="">深圳</option>
            <option value="">上海</option>
        </select>

（學習視訊分享：）

以上就是html中的from標籤有什麼用的詳細內容，更多請關注TW511.COM其它相關文章！