使用表單標籤,與用戶交互

表單提交:

網站怎樣與用戶進行交互?答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端,這樣服務器端程序就可以處理表單傳過來的數據。

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

<form method="get" action="save.php">

<form method="post">

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

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

2、method : post/get 的區別這一部分內容屬於後端程序員考慮的問題。感興趣的小夥伴可以查看本小節的 wiki,裏面有詳細介紹。


文本輸入框<form> <input type="type" name="myName" value="凡凡"/></form>

密碼輸入框<form> < input type="password" name="pass" value="123"/></form>

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


單選框 <input type ="radio" value="值" name="名稱" checked="checked">

複選框<input type="checkbox" value="值" name="名稱" checked="checked">

value 提交數據到服務器的值


下拉列表

<option value='提交值'>選項</option>

提交值是向服務器提交的值

選項是顯示的值

設置屬性selected="selected"


使用下拉列表框進行多選

<select>標籤中設置multiple="multiple"屬性


表單中的按鈕分爲兩種,提交按鈕和重置。

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

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

只有當type的值設置爲submit時,按鈕纔有提交作用,value按鈕上顯示的文字。

使用重置按鈕,重置表單信息。

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

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


form表單的label標籤

當用戶單擊選中該label標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控件上(就自動選中和該label標籤相關連的表單控件上)。

label標籤不會向用戶呈現任何特殊效果,它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本,就會觸發此控件。

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

標籤的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章