thml表單學習筆記

阿新 • • 發佈：2020-12-15

thml表單學習筆記

HTML中的< form >標籤用於建立表單，表單是讓使用者進行資訊輸入的，然後將輸入的資料提交到伺服器上，伺服器再根據提交的資料進行分析驗證反饋結果。

表單最常用的場景：登入、註冊、搜尋等。

表單可以包含很多元素，比如< input >、< textarea>、< selected >等

< form >標籤的常用屬性：

1.action：指定伺服器地址
2.method：指定表單資料的提交方式

method可選擇的的有get和post。get是預設的提交方式，get方式提交的資料會在位址列中顯示出來，很不安全，所能提交的資料量比較小，效率高。post的效率低，安全，可攜帶大量的資料，不會在位址列中顯示。

<form action="#" method=""></form>

< input >標籤

< input > 標籤用於蒐集使用者資訊。

根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。

< input >標籤的type屬性的值為text時

<!-- action指定伺服器地址，這裡先用#佔位符 method屬性不寫值預設是get-->
<form action="#" method 
="">
    <!-- 
    text型別的<input>標籤:
    type屬性不指定值，就預設為是text，text是可輸入文字的單行文字輸入框。 
    name和value是一對鍵值對，
    value是要提交的資料，name是該標籤提交的資料的標識，
    只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值。
    placeholder：設定輸入框中的文字提示，該屬性在IE8以下不生效
    -->
    <input type="" name="username" 
 value="" placeholder="輸入手機號或郵箱">
</form>

以上在網頁中顯示為
在這裡插入圖片描述

用< label >標籤繫結< input >標籤

<form action="#" method="">
    <!--
        for裡的值設定為input標籤的id值，就與該input標籤綁定了
        效果是在網頁中點選該標籤（網頁中是"使用者名稱："）就等於點選到input標籤
     -->
    <label for="username">使用者名稱：</label>
    <!-- 
        id：作為該標籤的唯一標識
    -->
    <input type="" id="username" name="username" value="" placeholder="輸入手機號或郵箱">
</form>

在網頁中的顯示：
在這裡插入圖片描述

使用者登入介面

<form action="#" method="">

    <label for="username">使用者名稱：</label>
    <input type="" id="username" name="username" value="" placeholder="輸入手機號或郵箱">
    <br>

    <label for="password">密&nbsp;&nbsp;&nbsp;碼：</label>
    <!-- password定義密碼欄位。該欄位中的字元被掩碼。 -->
    <input type="password" id="password" name="password" value="" placeholder="輸入密碼">
    <br>
    <!-- reset定義重置按鈕。重置按鈕會清除表單中的所有資料 -->
    <input type="reset" name="" id="" value="重置" >
    <br>
    <!-- type的值為submit時，定義了提交按鈕。提交按鈕會把表單資料傳送到伺服器 -->
    <input type="submit" value="登入">
    <br>
</form>

在網頁中的顯示：
在這裡插入圖片描述

輸入使用者名稱和密碼：
在這裡插入圖片描述

點選登入後，因為< form >標籤中的method屬性使用的是預設值get，get方式提交的資料會在位址列中顯示出來
在這裡插入圖片描述

< input >標籤的type屬性常用的值：

<form action="" >
	<!-- 
        checkbox定義複選框。name屬性和value屬性是鍵值對關係，而複選框本身就可以進行多項選擇，允許一個name有多個value，
        因此複選框中的多個選項的name屬性是可以重複存在的
    -->
    <input type="checkbox" name="hobbies" id="one" value="" />選項1
    <input type="checkbox" name="hobbies" id="two" value="" />選項2
    <br>

    <!-- 
        radio定義單選按鈕，單選按鈕是在多個選項中選取一個選項，因此多個單選按鈕必須使用相同的name值
        單選及複選框都具有一個checked屬性,功能是網頁載入時預設選中該選項
    -->
    <input type="radio" name="sex" value="男" checked=""/>男
    <input type="radio" name="sex" value="女"/>女
    <br>

    <!-- 檔案上傳 -->
    點選選擇檔案上傳：<input type="file" name="file">
    <br>

    <!-- 該標籤不在頁面中顯示，用於提交一些標識或預設值的，這些值是不需要使用者知道的，例如：qq、wechat登入的唯一標識 -->
    <input type="hidden" name="flag" value="qq">
</form>

< select >標籤、< textarea >和< iframe >標籤

<form action="">
			<!-- select代表下拉框，具體的內容要通過option標籤來實現 -->
			<select name="pros" id="">
				<option value="beijing">廣東省</option>
				<option value="henan">河南省</option>
				<option value="zhejiang">浙江省</option>
			</select>
			<br>
    
			<!-- textarea多行文字域的大小預設是可以自由擴充套件的，但是寬高的自由擴充套件會影響頁面的排版
			 因此可以採用這樣的禁用方式(樣式)：
				1、指定最大寬高及最小寬高 style='max-width: 200px;min-width: 200px;max-height: 200px;min-height: 200px;'
				2、禁止重置大小style="resize: none;"
			 -->
			詳細地址：<textarea style="resize: none;"></textarea>
    		<br>
</form>
		
<!-- iframe引入其他頁面
 frameborder：控制是否顯示邊框線 1顯示 0不顯示
 scrolling：控制是否顯示滾動條 yes顯示 no不顯示 auto根據頁面大小瀏覽器自動控制
 -->
<iframe src="./test.html" width="100%" height="800px" frameborder="0" scrolling="auto"></iframe>