HTML基礎知識day4
阿新 • • 發佈：2020-12-27
技術標籤：html
今天我們學習了html中表單的相關知識，表單在網頁中的主要功能是資料採集，一個表單通常有三個部分組成：表單域、表單標籤、表單按鈕。
表單標籤：< form>< /form>
語法：< form action=“url（向何處傳送表單資料）” method="get|post(通常使用post，對使用者的資訊保護更好 )>. . .< /form>
表單元素
語法：< input type=“input元素型別” name=“input元素名稱” value=“input元素的值” />
| text | 文字框 | < input type=“text” name="…" value="…" size=“文字框長度” maxlength=“文字框最多可輸入字元”/> |
|---|---|---|
| password | 密碼框 | < input type=“password” name="…" size=“密碼框長度” /> |
| radio | 單選按鈕 | < input type=“radio” name="…" value=“值” checked（按鈕選中狀態） /> |
| checkbox | 複選框 | < input type=“checkbox” name="…" value=“值” checked（複選框選中狀態） /> |
| select | 列表框 | < select name="…" size=“行數”>< option value=“選項的值” select=“selected（預設選中項）”>< /option>< /select> |
| img | 圖片 | < input type=“image” src=“圖片路徑”/> |
| reset | 重置按鈕 | < input type=“reset” name="…" value=“按鈕上顯示的文字”/> |
| button | 普通按鈕 | < input type=“button” name="…" value=“按鈕上顯示的文字”/> |
| textarea | 多行文字域 | < textarea name="…" rows=“顯示的行數” cols=“顯示的列數”>文字內容< /textarea> |
| file | 檔案域 | < input type=“file” name="…" /> |
| submit | 提交按鈕 | < input type=“submit” name="…" value=“按鈕上顯示的文字”/> |
| 郵件 | < input type=“email” name="…"/> | |
| url | 網址 | < input type=“url” name="…"/>（會自動驗證url地址格式是否正確） |
| number | 數字 | < input type=“number” name="…" min=“允許的最小值” max=“允許的最大值” step=“合法的數字間隔”/> |
| range | 滑塊 | < input type=“range” name="…" min=“允許的最小值” max=“允許的最大值” step=“合法的數字間隔”/> |
| search | 搜尋框 | < input type=“search” name="…"/> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#" method="post">
<p>使用者名稱<input type="text" name="user" maxlength="5" size="10"/></p>
<p>密碼<input type="password" name="pwd" size="10"/></p>
<input type="submit" name="sub" value="註冊"/>
<input type="reset" name="res" value="重置"/>
</form>
</body>
</html>
執行結果：
從圖中我們可以看出，因為文字框設定了允許的最大值maxlength=5,所以使用者名稱最多隻能輸入5個字元。而密碼框使用了password的元素型別，所以輸入的字元會自動變成*號，更加保險。type="reset"元素型別有重置頁面的效果，點選之後當前頁面會被重置。