<img>標簽：在網頁中插入圖片。

語法：

<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

舉例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

1、src：標識圖像的位置；

2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；

3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；

4、圖像可以是GIF，PNG，JPEG格式的圖像文件。

————————————————————————————————————————————————————————————————

<form>標簽：創建表單，把瀏覽者輸入的數據傳送到服務器端處理。

語法：

<form method="傳送方式" action="服務器文件">

講解：

1.<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。

2.action?：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。

3.method?：?數據傳送的方式（get/post）。

<form method="post" action="save.php"><label for="username">用戶名:</label><input type="text" name="username" /><label for="pass">密碼:</label><input type="password" name="pass" /> </form>

注意:

1、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。

2、method:post/get的區別這一部分內容屬于后端程序員考慮的問題。

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

<form><input type="text/password" name="名稱" value="文本" /> </form>

1、type：

? ?當type="text"時，輸入框為文本輸入框;

? ?當type="password"時,?輸入框為密碼輸入框。

2、name：為文本框命名，以備后臺程序ASP 、PHP使用。

3、value：為文本輸入框設置默認值。(一般起到提示作用)

舉例：

<form>姓名：<input type="text" name="myName"><br/>密碼：<input type="password" name="pass"> </form>

在瀏覽器中顯示的結果：

<textarea>標簽：當用戶需要輸入大量文本時，需要用到文本域。

語法：

<textarea rows="行數" cols="列數">文本</textarea>

1、<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在<textarea></textarea>標簽之間可以輸入默認值。

舉例：

<form method="post" action="save.php"> <label>聯系我們</label> <textarea cols="50" rows="10" >在這里輸入內容...</textarea> </form>

在瀏覽器中顯示結果：

注意這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。(css樣式)

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:

語法：

<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

1、type:

?? 當?type="radio"?時，控件為單選框

?? 當?type="checkbox"?時，控件為復選框

2、value：提交數據到服務器的值（后臺程序PHP使用）

3、name：為控件命名，以備后臺程序 ASP、PHP 使用

4、checked：當設置 checked="checked" 時，該選項被默認選中

如下面代碼：

在瀏覽器中顯示的結果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：

講解：

1、value：

2、selected="selected"：

設置selected="selected"屬性，則該選項就被默認選中。

在瀏覽器中顯示的結果：

下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用?Command?+單擊），可以選擇多個選項。如下代碼：

在瀏覽器中顯示的結果：

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。

當用戶需要提交表單信息到服務器時，需要用到提交按鈕。

語法：

<input type="submit" value="提交">

type：只有當type值設置為submit時，按鈕才有提交作用

value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。

語法：

<input?type="reset"?value="重置">

type：只有當type值設置為reset時，按鈕才有重置作用

value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

輸入賬號

單擊重置按鈕

<label>標簽：label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。

語法：

<label for="控件id名稱">

注意：標簽的?for 屬性中的值應當與相關控件的?id 屬性值一定要相同。

例子：

<form> <label for="male">男</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="sex" id="female" /> <label for="email">輸入你的郵箱地址</label> <input type="email" id="email" placeholder="Enter email"></form>

以上內容參考自慕課網：http://www.imooc.com

?

總結

以上是生活随笔為你收集整理的html知识笔记（三）——img标签、form表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。