html知識筆記(三)——img標籤、form表單
<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>