web前端中表單的作用是什么

這篇文章主要講解了“web前端中表單的作用是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“web前端中表單的作用是什么”吧！

表單的作用有兩個：1、對于用戶而言是數據錄入和提交的界面；2、對于網站而言是獲取用戶信息的途徑。一個表單有三個基本組成部分：1、表單標簽，包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法；2、表單域，包含了文本框、密碼框、隱藏域、多行文本框等；3、表單按鈕，包含了提交按鈕、復位按鈕和一般按鈕，用于將數據傳送到服務器上的CGI腳本或者取消輸入等。

web前端中的表單

表單，在網頁中的作用不可小視，主要負責數據采集的功能，比如你可以采集訪問者的名字和e－mail地址、調查表、留言簿等等。

表單的作用：

• 表單對于用戶而言是數據錄入和提交的界面；

• 表單對于網站而言是獲取用戶信息的途徑。

一個表單有三個基本組成部分：

• 表單標簽<form>：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。

• 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。

• 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

表單標簽<form>

form標簽用于創建供用戶輸入的HTML表單（表單域），以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。

form表單域中可以包含各種交互控件--控件標簽（文本字段、復選框、單選框、提交按鈕等等），比如< input>、< button>、< select>、< textarea>等標簽。

<form>標簽語法格式

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

method提交方式常用的4種：

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

表單域和表單按鈕

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>

感謝各位的閱讀，以上就是“web前端中表單的作用是什么”的內容了，經過本文的學習后，相信大家對web前端中表單的作用是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！