HTML入門之表單（form）標簽

標簽： HTML5 html

Html 表單標簽 Form

“form”作為英文單詞有“表格”的意思

一、標簽用途

在html中，標簽是使用來創建供用戶輸入的html表單，在網頁中很常見，比如：注冊和登錄頁面就是用表單實現的。

二、標簽語法格式

表單內容

說明：表單內容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等標簽

form屬性：
action屬性定義表單數據提交地址例如:http://www.baidu.com
method屬性定義表單提交的方式，一般有“get”方式和“post”方式

標簽中通常會有很多子元素，用來定義各種交互控件（文本字段、復選框、單選框、提交按鈕等等），比如< input>、< button>、< select>、< textarea>等標簽。

（一）input標簽的使用

標簽定義通用的表單元素：

type屬性：
    type="text" 定義單行文本輸入框
    type="password" 定義密碼輸入框
    type="radio" 定義單選框
    type="checkbox" 定義復選框
    type="file" 定義上傳文件     form表單需要加上屬性enctype="multipart/form-data"
    type="submit" 定義提交按鈕
    type="reset" 定義重置按鈕
    type="button" 定義一個普通按鈕
value屬性： 定義表單元素的值,此值是數據提交時鍵的值
name屬性：定義表單元素的名稱，此名稱是提交數據時的鍵名
checked:  radio 和 checkbox 默認被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.

（1）input標簽無屬性格式

<!DOCTYPE html>
<html>
	<body style="background-color: bisque;">

		<form>
				<input    />
		</form>

	</body>
</html>

在這里插入圖片描述

（2） input標簽，添加type屬性，

	type="submit" 定義提交按鈕
    type="reset" 定義重置按鈕
    type="button" 定義一個普通按鈕

<!DOCTYPE html>
<html>
	<body style="background-color: bisque;">
		<form>
				<input    />    只有input標簽
				<br/>
				
				
				<input   type = 'text' name = 'username' value = '00'/>
				<input   type = 'password' name = 'password' value = '123456' />      有value默認值
				
				<br/>
				
				<input   type = 'text' name = 'username' 
				value = '' placeholder='請輸入用戶名'/> 
				<!-- placeholder:提示信息 -->
				
				<!-- 輸入時默認信息消失通過js -->
				
				<input   type = 'password' value = 'password' 
				value = '111' placeholder='請輸入密碼...'/>
				<!-- value:默認值 -->
				
				<br/>
				<input   type = 'submit' value = '提交按鈕' >
				 <!-- type="submit" 定義提交按鈕 -->
				<input   type = 'reset' value = '重置按鈕' >
				<!-- type="reset" 定義重置按鈕 -->
				<input   type = 'button' value = '普通按鈕' >
				<!-- type="button" 定義一個普通按鈕 -->
				
		</form>
	</body>
</html>

在這里插入圖片描述

（3）input標簽，單選框radio的運用

<!DOCTYPE html>
<html>
	<body style="background-color: bisque;">
	<h2> 單選框 <h2/>
	
	性別：  <input  type = 'radio' name='' value=''/>男
			<input  type = 'radio' name='' value=''/>女
			<!-- 沒有添加name屬性值 -->
			
	<br/>
	
	性別：  <input  type = 'radio' name='sex' value=''/>男
			<input  type = 'radio' name='sex' value=''/>女
			<!-- 添加了name屬性值，并且屬性值相同時可以選擇進行單選 -->
			
	</body>
</html>

第一行的性別選項未設置 name屬性，所以無法進行單選
第一行的性別選項設置了 name屬性，且‘男’、‘女’的name屬性值相同，故可以進行單選
在這里插入圖片描述

（4）input標簽，type=“checkbox” 復選框

<!DOCTYPE html>
<html>
	<body style="background-color: bisque;">
		<form>
				<input  type = 'checkbox' name= '' value = '' checked>蘋果
				<input  type = 'checkbox' name= '梨' value = '梨'>梨
				<input  type = 'checkbox' name= '葡萄' value = '葡萄'>葡萄
				<input  type = 'checkbox' name= '香蕉' value = '香蕉'>香蕉
				<!-- checked設置為默認選項 -->
		</form>
	</body>
</html>

在這里插入圖片描述

（二）標簽

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

如性別選擇的單選框，只需要鼠標點擊到‘男’就可以，不需要點到按鈕點

<!DOCTYPE html>
<html>
	<body style="background-color: bisque;">
	<h2> 單選框 <h2/>
	
	性別：  <input  type = 'radio' name='' value=''/>男
			<input  type = 'radio' name='' value=''/>女
			<!-- 沒有添加name屬性值 -->
			
	<br/>
	
	性別：  <input  type = 'radio' name='sex' value=''/>男
			<input  type = 'radio' name='sex' value=''/>女
			<!-- 添加了name屬性值，并且屬性值相同時可以選擇進行單選 -->
			
			
	<h3>升級用法<h3/>
	性別：  <input  type = 'radio' name='sex' value='' id = 'man'/>
			<label for = 'man'> 男<label/>
			<input  type = 'radio' name='sex' value='' id = 'woman'/>
			<label for = 'woman'>女<label/>
			<!-- 添加了name屬性值，并且屬性值相同時可以選擇進行單選 -->
			<!-- 它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件 -->
	
	<h3>設置按鈕失效<h3/>
		<input   type = 'submit' value = '注冊按鈕' disabled>
				<!-- disabled  使按鈕失效 -->
	
	</body>
</html>

在這里插入圖片描述

（三）select 標簽定義下拉表單元素

  name:表單提交項的鍵.
  size：選項顯示個數
  multiple：多選項 
  <option> <option/> 下拉選中的每一項 屬性：

  value:表單提交項的值.   
  selected: selected下拉選默認被選中
  <optgroup>為每一項加上分組

<!DOCTYPE html>
<html>
	<body style="background-color: bisque;">
		<form>
			<h3>下拉框<h3/>
			<select name="address">
				<option value="1">山東省</option>
				<option value="2" selected="selected">北京市</option>
				<option value="3">河北省</option>
				<option value="4">河南省</option>
			<select/>
			<!-- selected="selected",默認顯示,不選擇,不提交 -->
			
			<br/><br/>
			
			<select name="address" multiple="multiple" size="2">
				<option value="1">山東省</option>
				<option value="2" >北京市</option>
				<option value="3">河北省</option>
				<option value="4">河南省</option>
			<select/>
			<!-- select name="un" multiple="multiple"size="2" -->
			<!-- multiple="multiple"可以多選; size顯示的數量 -->
				
		</form>
	</body>
</html>

在這里插入圖片描述

（四）textarea 標簽定義多行文本輸入框

name: 表單提交項的鍵.
cols: 文本域默認有多少列
rows: 文本域默認有多少行

<!DOCTYPE html>
<html>

	<body>

		<h3>textarea標簽使用<h3/>
		<textarea  cols = '30' rows = '20' style = "resize:none;">
		</textarea>
		
	</body>
</html>

在這里插入圖片描述

三、標簽屬性補充：

（1）accept：服務器接收到的文件的類型（html5版本也不支持）；
（2）accept-charset：服務器可處理的表單數據字符集；
（3）action：當提交表單時向何處發送表單數據；
（4）autocomplete：是否啟用表單的自動完成功能，值可以是：on、off，html5新增；
（5）enctype：在向服務器發送表單數據之前如何對其進行編碼，
（6）method="post"時可以使用，值可以是：multipart/form-data、text/plain等；
（7）method：用于發送表單數據的HTTP方法，值可以是：get、post；
（8）name：規定表單的名稱，在xhtml中也廢棄，使用id來代替；
（9）novalidate：提交表單時不進行驗證，值為：novalidate，html5新增；
（10）target：在何處打開action屬性中的地址，值可以是：_blank、_self、_parent、_top；

本文鏈接：https://blog.csdn.net/weixin_43848614/article/details/105005578

智能推薦