Form 對象
Form 對象代表一個 HTML 表單。
在 HTML 文檔中 <form> 每出現(xiàn)一次,F(xiàn)orm 對象就會被創(chuàng)建。
表單用戶通常用于收集用戶數(shù)據(jù),包含了 input 元素如:文本字段,復(fù)選框,單選框,提交按鈕等待。表單也可以說選項菜單, textarea, fieldset, legend, 和 label 元素。
表單用于向服務(wù)端發(fā)送數(shù)據(jù)。
Form 對象收集
W3C: W3C 標準。
集合 | 描述 | W3C |
---|---|---|
elements[] | 包含表單中所有元素的數(shù)組。 | Yes |
Form 對象屬性
屬性 | 描述 | W3C |
---|---|---|
acceptCharset | 服務(wù)器可接受的字符集。 | Yes |
action | 設(shè)置或返回表單的 action 屬性。 | Yes |
enctype | 設(shè)置或返回表單用來編碼內(nèi)容的 MIME 類型。 | Yes |
length | 返回表單中的元素數(shù)目。 | Yes |
method | 設(shè)置或返回將數(shù)據(jù)發(fā)送到服務(wù)器的 HTTP 方法。 | Yes |
name | 設(shè)置或返回表單的名稱。 | Yes |
target | 設(shè)置或返回表單提交結(jié)果的 Frame 或 Window 名。 | Yes |
Form 對象方法
方法 | 描述 | W3C |
---|---|---|
reset() | 重置一個表單 | Yes |
submit() | 提交一個表單 | Yes |
Form 對象事件
事件 | 描述 | W3C |
---|---|---|
onreset | 在重置表單元素之前調(diào)用。 | Yes |
onsubmit | 在提交表單之前調(diào)用。 | Yes |
標準屬性和事件
Form 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
Reset 對象
在 HTML 表單中 <input type="reset"> 標簽每出現(xiàn)一次,一個 Reset 對象就會被創(chuàng)建。
當(dāng)重置按鈕被點擊,包含它的表單中所有輸入元素的值都重置為它們的默認值。默認值由 HTML value 屬性或 JavaScript 的 defaultValue 屬性指定。
重置按鈕在重置表單之前觸發(fā) onclick 句柄,并且這個句柄可以通過返回 fasle 來取消。
您可以通過遍歷表單的 elements[] 數(shù)組來訪問某個重置按鈕,或者通過使用document.getElementById()。
Reset 對象屬性
W3C: W3C 標準。
屬性 | 描述 | W3C |
---|---|---|
disabled | 設(shè)置或返回重置按鈕是否應(yīng)被禁用。 | Yes |
form | 返回一個對包含此重置按鈕的表單對象的引用。 | Yes |
name | 設(shè)置或返回重置按鈕的名稱。 | Yes |
type | 返回重置按鈕的表單元素類型。 | Yes |
value | 設(shè)置或返回重置按鈕上顯示的文本。 | Yes |
標準屬性和事件
Reset 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
HTML是用來開發(fā)網(wǎng)頁的,它是開發(fā)網(wǎng)頁的語言
全稱HyperText Mark-up Language,超文本標記語言
標記就是標簽
<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等,標簽大多數(shù)都是成對出現(xiàn)的。
超文本 兩層含義:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標題</title>
</head>
<body>
網(wǎng)頁顯示內(nèi)容
</body>
</html>
第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發(fā)人員在告訴瀏覽器
整個網(wǎng)頁是從<html>這里開始的,到</html>結(jié)束
也就是html文檔的開始和結(jié)束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責(zé)對網(wǎng)頁進行設(shè)置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網(wǎng)頁上顯示的內(nèi)容
網(wǎng)頁文件的后綴是.html, 一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內(nèi)容將文件渲染成網(wǎng)頁
VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具
下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對應(yīng)的安裝包進行下載:
安裝一切默認
1 標簽不區(qū)分大小寫,但是推薦使用小寫
2 根據(jù)標簽的書寫形式,標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結(jié)束標簽組成的一對標簽,這種標簽允許嵌套和承載內(nèi)容,比如: div標簽 2.2 單標簽是一個標簽組成,沒有標簽內(nèi)容, 比如: img標簽
標簽的使用形式
列表標簽
網(wǎng)頁效果
表格標簽
<table>標簽:表示一個表格
<tr>標簽:表示表格中的一行
<td>標簽:表示表格中的列
<th>標簽:表示表格中的表頭
屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并
網(wǎng)頁效果
表單標簽
表單用于搜集不同類型的用戶輸入的數(shù)據(jù),然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
<form>標簽 表示表單標簽,定義整體的表單區(qū)域
一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標簽來承載
這些標簽稱為表單元素標簽
網(wǎng)頁效果
表單用于搜集不同類型的用戶輸入的數(shù)據(jù),然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
兩種方式的區(qū)別:
表單元素屬性設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復(fù)選框
照片 type="file" 定義上傳文件
個人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個普通按鈕
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
點擊提交:
可以看到服務(wù)器收到了請求報文。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。