Web前端 ---HTML語言表單(day003)

2020-10-26 11:00:35

表單

<form>標籤:表單

網頁表單中有許多可以輸入或選擇的元件,使用者可以在表單中填寫資訊,最終提交表單,可以使用者端資料提交至伺服器。action是遞交的伺服器地址 method是提交方法,有post和get。這裡採用post方式<form action="網頁連結地址" method="post">內容<form/>

表單的文字部分

需要用到的標籤:

<label for="name值">內容</label> ,該標籤作用是點選內容時跳轉至name值對應的文字方塊。

<input type="型別" id="userid" name="username" value="本標籤的預設值" size="20" readonly="readonly" placeholder="請輸入" disable="disable"/>其中type是型別,一般有text(單行文字方塊),id是該標籤的id, name和value是給伺服器端遞交的資訊,name是可重複的,value是值 。size是文字方塊的尺寸。<readonly="readonly">是讓文字方塊唯讀。<placeholder="請輸入">是在無輸入時的提示資訊。<disable="disable">是禁用文字方塊,內容變為灰色不可用。

input基本語法

1.密碼框<input type="password" value="123456" sizr="number"/>當type是password時,單行文字方塊輸入將以黑色圓點形式顯示。value是初始密碼,size是密碼區的寬度。

2.單選框<input type="radio" value="男" checked="checked"/>當type是radio時,是單選選項。value是初始值,name須相同。<checked="checked">是預設選項。單選時必須填寫value值。

例如:

<form>
				男:<input type="radio" value="男"checked="checked" name="1"/>
				女:<input type="radio" value="" name="1"/>
			</form>

建立了一個單選。

3.多選框<input type="checkbox" value="預設值" name="核取方塊框名"/>當type為checkbox時是建立一個核取方塊,value是預設值,name須相同。name相同時為一組,才能構成多選。

			<form>
				遊戲<input type="checkbox" value="遊戲" name="hobit" id="game" />
				程式設計<input type="checkbox" value="程式設計" name="hobit" id="program" />
				學習<input type="checkbox" value="學習" name="hobit" id="study" />
			</form>

4.檔案選擇框<input type="file" name="img"/ accept=".檔案字尾名,.檔案字尾名...">當type為file時,建立一個檔案選擇框。name是檔案選擇框的名。

5.下拉框<select name="名"><option></option></select>

創造一個下拉框。

<form>
	<select>
		<option>請選擇</option>
	</select>
</form>

6.多行文字域<textarea cols="number" rows=""></textarea>

創造一個多行文字域。cols是列長度,rows是行長度。

7.<input type="reset" name="按鈕名稱" value="按鈕上顯示的資=字">`當type為reset時,建立一個重置按鈕。重置表單內容為預設值。

8.<input type="submit" value="按鈕上顯示的內容">當type為submit時,建立一個提交按鈕。value是按鈕上的顯示內容

9.<input type="button" value="按鈕">當type為button時,建立一個普通按鈕,只能被點選觸發事件用。

內聯框架

內聯框架

<iframe src="初始介面的地址" name="內聯框架的名稱。"width="寬度" height="高度" frameborder="內聯框架的邊框厚度。"></iframe>

在你的頁面中內嵌一個網頁。src為初始顯示頁面的地址,name為你內嵌視窗的名稱。若要用內嵌視窗開啟超連結可用:<a href="網頁地址"target="內聯框架name值"></a>

作者聯絡方式:
qq945677662
vxa2482466921
如有錯誤,請幫忙指正,大家一起交流哈