<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
?