html+css 5

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 開篇第五章

1、使用表單標簽,與用戶交互。

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

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

講解:

1. ? ?<form>標簽是成對出現(xiàn)的,以<form>開始,以</form>結束。

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

3.method?:?數(shù)據(jù)傳送的方式(get/post)。

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


2、文本輸入框、密碼輸入框。

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

語法:

<form>

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

</form>

1、type:

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

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

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

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


3、文本域,支持多行文本輸入。

當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。

語法:<textarea ? ? cols="列數(shù)" ? ? rows="行數(shù)">文本</textarea>

1、<textarea>標簽是成對出現(xiàn)的,以<textarea>開始,以</textarea>結束。

2、cols :多行輸入域的列數(shù)

3、rows :多行輸入域的行數(shù)

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


4、使用單選框、復選框,讓用戶選擇.

在使用表單設計調查表時,為了減少用戶的操作,使用選擇框是一個好主意,html中有兩種選擇框,即單選框復選框,兩者的區(qū)別是單選框中的選項用戶只能選擇一項,而復選框中用戶可以任意選擇多項,甚至全選。

語法:

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

1、type:

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

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

2、value:提交數(shù)據(jù)到服務器的值(后臺程序PHP使用)

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

4、checked:當設置 checked="checked" 時,該選項被默認選中。


5、使用下拉列表框,節(jié)省空間.


1、value:

2、selected="selected"

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


6、使用下拉列表框進行多選.

下拉列表也可以進行多選操作,在<select>中設置multiple="multiple"屬性,就可以實現(xiàn)多選功能,在 windows 操作系統(tǒng)下,進行多選時按下ctrl鍵同時單擊,(在mac下按command同時單擊),可以選擇多個選項。



7、使用提交按鈕,提交數(shù)據(jù)。

在表單中有兩種按鈕可以使用,分別為:提交按鈕、重置。這一小節(jié)講解提交按鈕:當用戶需要提交表單信息到服務器時,需要用到提交按鈕

語法:

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

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

value按鈕上顯示的文字。


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

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

語法:<input ? ?type="reset" ? ? value="重置">

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

value按鈕上顯示的文字


9、form表單中的label標簽.

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

語法:<label ? ?for="控件id名稱">

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


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,520評論 1 41
  • 表單基礎知識 在HTML中,表單是由 元素來表示的,而在JS中,表單對應的則是HTMLFormElement類型。...
    oWSQo閱讀 958評論 0 1
  • 《裕語言》速成開發(fā)手冊3.0 官方用戶交流:iApp開發(fā)交流(1) 239547050iApp開發(fā)交流(2) 10...
    葉染柒丶閱讀 28,703評論 5 20
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 7,295評論 0 17
  • 我對自己的探詢永無止境,有時候累了休息一下還會繼續(xù),原來我是想要試探生命更多的可能性,我要活出一份影響力的人呢!
    美麗的小魚閱讀 126評論 0 0

友情鏈接更多精彩內容