在html中,from標簽用于創(chuàng)建供用戶輸入的HTML表單(表單域),以實現(xiàn)用戶信息的收集和傳遞,form中的所有內(nèi)容都會被提交給服務器;語法“<form action="提交地址" method="提交方式" name="表單名稱">表單控件</form>”。form表單中可包含一個或多個表單元素,比如input、select、textarea。
前端(vue)入門到精通課程:進入學習
本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。
html5 form標簽
作用:form標簽用于創(chuàng)建供用戶輸入的HTML表單(表單域),以實現(xiàn)用戶信息的收集和傳遞,form中的所有內(nèi)容都會被提交給服務器。
form表單域中可以包含各種交互控件–控件標簽(文本字段、復選框、單選框、提交按鈕等等),比如< input>、< button>、< select>、< textarea>等標簽。
<form>標簽語法格式
<form action="提交地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>
-
name:只是給該表單命名,用于js技術使用。
-
action:設定表單數(shù)據(jù)提交給哪個文件,用于后端技術(比如php)來接受并處理數(shù)據(jù)
-
method: 設定數(shù)據(jù)提交方式,用于根據(jù)不同的數(shù)據(jù)需求來選擇合適的提交(傳送)方式
method提交方式常用的4種:
get 一般用來查詢信息 post 一般用來新增信息 put 一般用來修改信息 delete 一般用來刪除信息
post和get區(qū)別:
-
數(shù)據(jù)提交方式,get把提交的數(shù)據(jù)url可以看到,post看不到
-
get一般用于提交少量數(shù)據(jù),post用來提交大量數(shù)據(jù)
-
get最多提交1K數(shù)據(jù),post理論上沒有限制
-
get提交的數(shù)據(jù)在瀏覽器歷史記錄中,安全性不好
一個完整的表單包含三個基本組成部分:表單標簽、表單域、表單按鈕。
1、表單標簽
是指form標簽本身,它是一個包含表單元素的區(qū)域,使用定義
2、表單域
是標簽中用來收集用戶輸入的每一項,通常用input標簽來定義,input標簽有不同的類型,對應用戶不同的數(shù)據(jù)。(比如:文本域、下拉列表、單選框、復選框等等)
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屬性只有單選框和復選框才有
屬性 | 屬性值 | 描述 |
---|---|---|
type | Text | 單行文本輸入框 |
Password | 密碼輸入框 | |
Radio | 單選按鈕 | |
Checkbox | 復選框 | |
Button | 普通按鈕 | |
Submit | 提交按鈕 | |
Reset | 重置按鈕 | |
Image | 圖像形式的提交按鈕 | |
File | 文本域 | |
name | 空間的名稱 | |
value | input控件中的默認文本值 | |
size | input控件在頁面中的顯示寬度 | |
checked | 定義選擇空間默認被選中的項 | |
Maxlength | 控件允許輸入的最多字符數(shù) |
密碼框
<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="">
按鈕
普通按鈕可以根據(jù)需求來用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="省市區(qū)" id=""> <option value="">山東</option> <option value="">北京</option> <option value="">江蘇</option> <option value="">深圳</option> <option value="">上海</option> </select>
(學習視頻分享:web前端入門)