前言
又來更新啦~今天寫有關HTML表單創建的筆記，前面還有兩篇關於表格和文本的筆記，大家可以去看看：HTML學習筆記摘要目錄參考。表單因爲種類以及屬性挺繁瑣，所以單拿出一章來寫。對於HTML這種目前學來很簡單的，看書看一遍就會，一點難度都沒有，但看完啥代碼都不會寫。所以像我這樣寫個筆記效果還是蠻好的，雖然大部分內容都是書上有的，但手打一遍收穫還是很大的，好了，下面進入正題。
表單主要用於收集網頁上瀏覽者的相關信息，其標籤爲< form >< /form >。表單的基本語法格式爲
<form action="url" method="get|post" enctype="mime"></form>
其中，action = " url "指定助理提交表單的格式，他可以是一個URL地址或者一個電子郵件的地址。method = " get “或者” post "指明提交表單的HTTP方法。enctype = " mime "知名用來把表單提交給服務器時的互聯網媒體形式。表單是一個能夠包含表單元素的區域。通過添加不同的表單元素，將顯示不同的效果。
下面是書上的一個程序：
<body>
<form>
下面是輸入用戶登錄信息<br>
用戶名稱
<input type="text" name="user">
<br>
用戶密碼
<input type="password" name="password"><br>
<input type="submit" value="登陸">
</form>
</body>
看了這個程序我們知道了，所謂表單就是我們需要提交給網頁後臺的途徑，比如密碼，用戶名啥的。
表單基本元素
表單元素是能夠讓用戶在表單中輸入信息的元素。常見的有文本框，密碼框，下拉列表框，單選按鈕，複選框等。
單行文本輸入框text
單行文本輸入框(text)是一種讓訪問者自己輸入內容的表單對象，通常被用來填寫單個自或者簡短的回答，如用戶姓名，地址等。
代碼格式：
<input type="text" name="zx" size="..." maxlength="..." value="...">
type="text"定義單行文本框，name定義名字，並不會顯示出來，但會在其他地方引用時用到，名字應該是獨一無二的。size屬性定義文本框的寬度，單位是單個字符寬度。maxlength屬性定義最多輸入的字符數。value屬性定義文本框的初始值。
多行文本輸入框textarea
<textarea name="..." cols="//" rows="//" wrap="//"></textarea>
非常簡單，首先定義是多行文本框，然後輸入名字name，再輸入文本框寬度，單位爲單個字符寬度。rows屬性定義多行文本框的高度，單位爲單個字符高度。wrap屬性定義內容大於文本區域時顯示的方式。
<form>
請輸入您的戀愛情況wrap="hard"<br>
<textarea name="yourlove" cols="50" rows="5" wrap="hard"></textarea>
<br>
<input type="submit" value="提交"><br>
請輸入您的戀愛情況wrap="off"<br>
<textarea name="yourlove" cols="50" rows="5" wrap="off"></textarea>
<br>
<input type="submit" value="提交"><br>
請輸入您的戀愛情況wrap="soft"<br>
<textarea name="yourlove" cols="50" rows="5" wrap="soft"></textarea>
<br>
<input type="submit" value="提交"><br>
請輸入您的戀愛情況wrap="physical"<br>
<textarea name="yourlove" cols="50" rows="5" wrap="physical"></textarea>
<br>
<input type="submit" value="提交"><br>
請輸入您的戀愛情況wrap="virtual<br>
<textarea name="yourlove" cols="50" rows="5" wrap="virtual"></textarea>
<br>
<input type="submit" value="提交"><br>
</form>
對於前幾個屬性沒什麼好說的，但最後一個wrap有五個選項，我們不設置它，用默認屬性是沒啥問題的，但我們在這兒鑽研一下，我們把這五個設置一遍，看到出來soft有很大不同，是橫着顯示的，其他四個沒有什麼區別，這時就要發揮CSDN的用處啦，我們去百度一下：
soft 在表單提交時，textarea 中的文本不換行。(默認)
hard 在表單提交時，textarea 中的文本換行（包含換行符）。
當使用 “hard” 時，必須指定 cols 屬性
嗯哼，沒找到我想要的，大多是這三行介紹，是提交時的區別，並不是顯示時的區別，就先不管了。。。
密碼輸入框password
密碼輸入框就是密碼輸入框啦，經平時輸密碼顯示小黑點的那個：
<input type="password" name="..." size="..." maxlength="...">
type=" password "定義密碼輸入框；
<form>
用戶姓名：<input type="text" name="yourname">
<br>
登陸密碼：<input type="password" name="pw">
<br>
</form>
單選按鈕radio
<input type="radio" name=".." value="..">
type = " radio " 定義單選按鈕，name就是單選按鈕的名稱，因爲單選按鈕都是以組爲單位使用的，在同一組中的單選按鈕都是同一個名稱；value屬性定義單選按鈕的值。
<form>
請選擇你喜歡的電影類型：
<br>
<input type="radio" name="MV" value="MV1">愛情片<br>
<input type="radio" name="MV" value="MV2">動作片<br>
<input type="radio" name="MV" value="MV3">愛情動作片<br>
</form>
複選框checkbox
<input type="checkbox" name=".." value="..">
<form>
請選擇你喜歡的電影類型：
<br>
<input type="checkbox" name="MV" value="MV1">愛情片<br>
<input type="checkbox" name="MV" value="MV2">動作片<br>
<input type="checkbox" name="MV" value="MV3">喜劇片<br>
<input type="checkbox" name="MV" value="MV4" checked>愛情動作片<br>
</form>
程序中，愛情動作片是默認勾選的。checked屬性主要用來設置默認選中項。
列表框select
列表框主要用於在有限的空間裏設置多個選項。列表框既可以用作單選，也可以用作複選。
<select name="..." size="..." multiple>
<option value="..." selected>
...
</option>
...
</select>
size定義列表框的函數，name屬性定義列表框的名稱，multiple屬性表示可以多選，如果不設置本屬性，那麼只能單選；value屬性定義列表項的值，selected屬性表示默認已經選中本選項。
<form>
選擇你喜歡的圖書類型：<br>
<select name="fruit" size="3" multiple>
<option value="BOOK1" >HTML編程</option>
<option value="BOOK1" selected>學習opencv</option>
<option value="BOOK1">STM32</option>
</select>
</form>
普通按鈕button
普通按鈕用來控制其他定義了處理腳本的處理工作。
<input type="button" name="" value="" onClick="">
value定義按鈕顯示的文字，onClick屬性表示單擊行爲，也可以表示其他事件，通過指定腳本函數來定義按鈕的行爲。
<form>
點擊下面的按鈕，把文本框1的內容複製到文本框2中：
<br>
文本框1：<input type="text" id="field1" value="學習HTML">
<br>
文本框2：<input type="text" id="field2">
<input type="button" name="BU" value="點擊我" onClick="document.getElementById('field2').value=document.getElementById
('field1').value">
</form>
這些代碼確實能實現複製的功能，但對於onClick="document.getElementById('field2').value=document.getElementById ('field1').value這行代碼，我確實看不懂，應該是屬於我們上面說的也可以表示其他事件，通過指定腳本函數來定義按鈕的行爲。裏面的腳本吧？不清楚，但我們可以看懂onClick這個詞就好了，想來學到後面我們就可以自己寫這些操作了。
提交按鈕submit
submit用來將輸入的信息提交給服務器，代碼格式：
<input type="submit" name="..." value="...">
通過提交按鈕，可以將表單中的信息提交給表單中action所指向的文件。
<form action="Untitled-1.html" method="get">
請輸入你的名字：<input type="text" name="yourname">
<br>
<input type="submit" value="提交">
</form>
我們可以發現，輸入名字點擊提交後，會跳轉到提交的頁面<form action="Untitled-1.html" method="get">Untitled-1.html網頁，但誰接收了我們提交的名字我們目前並不知道，我們將這個問題留在後續博文中吧，因爲我也不知道。
重置按鈕reset
重置按鈕又叫復位按鈕。
<input type="reset" name=",,," value="...">
<form >
請輸入用戶名稱：<input type="text">
<br>
請輸入用戶密碼：<input type="password">
<br>
<input type="submit" value="登陸">
<input type="reset" value="重置">
</form>
尾言
其實按書上所寫，本章還有一節高級表單，但寫到現在已經5000多字了，雖然很多是代碼，不過量也不少了，希望大家可以有所收穫，高級表單下篇筆記再寫。
我們可以總結如下：
- 表單元素是在表單區域< form >內進行佈置的
- 表單元素都有獨一無二的名字name
- 表單元素所顯示的文字或自身標籤爲value，選項的value是不表現出來的，按鈕的value是按鈕所表示的
好了，今天就到這裏，我後續會繼續更新我的HTML學習筆記，學完後會整理一些其他所學，多多關注哦~