HTML form 表單

時間 2019-12-08

標籤 html form 表單欄目 HTML 简体版

原文原文鏈接

1.id、name的關係　javascript

　　一般咱們在寫HTML代碼時，會給控件指定一個id屬性，這個屬性只供JS和CSS使用，在表單提交時，它不起任何做用;css

　　在HTML代碼中咱們會指定不一樣的value爲各個不一樣的控件作默認值，那麼爲那些控件指定相應的id屬性將會方便地找到它們;html

　　name屬性的值是做爲和服務器通訊時使用的 key;　　
　　若是不須要用JS和CSS控制的控件，或許它們只是用來顯示一些數據(只讀)，那麼就沒有必要指定id屬性，name屬性也能夠不用給出(避免提交無心義的數據)。java

2.<form> </form> 標籤：建立HTML表單web

3.get,post ：表單提交方式編程

說明：瀏覽器

form用於爲用戶輸入建立HTML表單服務器

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。app

表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素。post

表單用於向服務器傳輸數據。

屬性：

action [URL]: 規定當提交表單時向何處發送表單數據。

method [get/post]: 規定用於發送 form-data 的 HTTP 方法。

　　get: from表單裏所填的值，附加在action指定的URL後面，作爲URL連接而傳遞。

　　post:from表單裏所填的值，附加在HTML Headers上。

enctype [string]:規定在發送表單數據以前如何對其進行編碼。　　

　　enctype 屬性可能的值：

- application/x-www-form-urlencoded ：在發送前編碼全部字符（默認方式）（空格轉換爲 "+" 加號，特殊符號轉換爲 ASCII HEX 值）。
- multipart/form-data ：不對字符編碼，包含文件上傳控件的表單時，必須使用該值
- text/plain ：空格轉換爲 "+" 加號，但不對特殊字符編碼。

title：設置網站訪問者的鼠標放在表單上的任意位置停留時，瀏覽器用小浮標顯示的文本。

name:表單的名稱。注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的。

表單元素

1.文本框

<html>
<head>
	<meta charset='utf-8' />
	<title>表單</title>
</head>
<body>
<form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data">
	<label for="username">用戶名：</label>
	<input type="text" id="username" name="username" value="用戶名"/><br/>
	<label for="passwd">密碼：</label>
	<input type="password" id="passwd" name="passwd"/>

</form>
</body>
</html>

　　label:

　　　　<label> 標籤爲 input 元素定義標註（標記）。

　　　　label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

　　　　<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

文本框屬性：

　　　　type 屬性取值:
　　　　　　text -- 文字輸入域(輸入型)
　　　　　　password -- 也是文字輸入域,可是輸入的文字以密碼符號'*'顯示(輸入型)
　　　　　　file -- 能夠輸入一個文件路徑(輸入型)
　　　　　　checkbox -- 複選框.能夠選擇零個或多個(選擇型)
　　　　　　radio -- 單選框.只能夠選擇一個並且必須選擇一個(選擇型)
　　　　　　hidden -- 表明隱藏域,能夠傳送一些隱藏的信息到服務器
　　　　　　button -- 按鈕(點擊型)
　　　　　　image -- 使用圖片來顯示按鈕,使用src屬性指定圖像的位置(就像img標籤的src屬性)(點擊型)
　　　　　　submit -- 提交按鈕,表單填寫完畢能夠提交,把信息傳送到服務器.能夠使用value屬性來顯示按鈕上的文字(點擊型)
　　　　　　reset -- 重置按鈕,能夠把表單中的信息清空(點擊型)

　　　　name:向服務器提交表單時的 key 值

　　　size：指定文本框的寬度，以字符個數爲單位；在大多數瀏覽器中，文本框的缺省寬度是20個字符。

　　　　value：指定文本框的默認值，是在瀏覽器第一次顯示錶單或者用戶單擊按鈕以後在文本框中顯示的值。

　　　　maxlength：指定用戶輸入的最大字符長度。

　　　　readonly：只讀屬性，當設置readonly屬性後，文本框能夠得到焦點，但用戶不能改變文本框中的value。

　　　　disabled：禁用，當文本框被禁用時，不能得到焦點，固然，用戶也不能改變文本框的值。而且在提交表單時，瀏覽器不會將該文本框的值發送給服務器。

2.單選按鈕

<form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data">
	<label for="male">男</label>
	<input type="radio" id="male" name="gender"/> 
	<label for="felmale">女</label>
	<input type="radio" id="felmale" name="gender"/>
</form>

　　兩個單選按鈕的name屬性必須相同才能關聯起來

3.複選框

<form>
<label for="b">籃球</label>
<input type="checkbox" name="sport" id="b"/>
<label for="f">足球</label>
<input type="checkbox" name="sport" id="f"/>
<label for="c">棒球</label>
<input type="checkbox" name="sport" id="c"/>
<label for="d">兵乓球</label>
<input type="checkbox" name="sport" id="d"/>
</form>

4. 文件上傳

　　使用file，則form的enctype必須設置爲multipart/form-data，method屬性爲POST。

<form action="127.0.0.1" method="post" enctype="multipart/form-data">

<p>要上傳的文件１<input type="file" name="file"/></p>

<p><input type="submit" value="提交" /></p>
</form>

5. 下拉框

<select> 下拉選標籤屬性：

name:表單提交項的鍵.

size：選項個數

multiple：multiple

<option> 下拉選中的每一項屬性：value:表單提交項的值. selected: selected下拉選默認被選中

<optgroup>爲每一項加上分組

<form action="127.0.0.1" enctype="multipart/form-data" method="post" id="fname">
	
</form>
	<select name="carlist" form="fname">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="opel">Opel</option>
		<option value="audi">Audi</option>
	</select>
</body>

　　select 寫在表單以外，但仍屬於表單的一部分（select的form屬性，form的id屬性）

<form action="127.0.0.1" enctype="multipart/form-data" method="post">
		<select name="carlist">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="opel">Opel</option>
		<option value="audi">Audi</option>
	</select>
</body>
</form>

<form action="127.0.0.1" enctype="multipart/form-data" method="post">
	<select name="carlist">
	<optgroup label="car"></optgroup>
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
	<optgroup label="fruit"></optgroup>
		<option value="orange">Orange</option>
		<option value="apple">Apple</option>
	</select>
</body>

6.文本域

定義和用法

<textarea> 標籤訂義多行的文本輸入控件。

文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（一般是 Courier）。

能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

註釋：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。

<form action="127.0.0.1" enctype="multipart/form-data" method="post">
	<textarea cols="20" rows="10" name="textarea">寫點啥呢</textarea>
</form>

7.提交，重置

<form action="127.0.0.1" enctype="multipart/form-data" method="post">
	<input type="submit" value="登錄">
	<input type="reset" value="重置">
</form>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。