HTML+CSS:使用form表單控件,與用戶交互

HTML+CSS:使用form表單控件,與用戶交互

今天這篇文章我們主要來看一下表單的控件都有哪些,如何使用表單標籤,與用戶交互。

(1)網站怎樣與用戶進行交互?

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

使用語法:

結束。

2、action :瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php),後臺可以通過這個文件來接收前端傳過去的數據資料並進行分析處理。

3、method : 數據傳送的方式(get/post),get多用於獲取數據,post多用於提交數據(關於這一塊大家可以簡單瞭解一下即可,後期我們會在網站製作的時候進行講解)。

注意:所有表單控件(文本框、文本域、按鈕、單選框、複選框等)都必須放在

標籤之間(否則用戶輸入的信息可提交不到服務器上哦!)。

(2)表單控件介紹

1)文本輸入框、密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時,就會用到文本輸入框。文本框和密碼框只有type類型的區別,其它的寫法是一樣的。

使用語法:

文本輸入框:

密碼輸入框:

詳細講解:

1、type:當type="text"時,輸入框為文本輸入框,輸入的文字是可以看見的;當type="password"時, 輸入框為密碼輸入框,輸入的文字內容是無法看見的。

2、name:為文本框/密碼框命名,以備後臺程序使用。

3、value:為文本輸入框輸入的內容。

4、placeholder:當我們的value內容為空的時候顯示,用於提示輸入框輸入信息格式;

使用練習:我們創建一個表單,表單裡邊包含用戶名和密碼輸入框。具體的代碼如下圖所示:

HTML+CSS:使用form表單控件,與用戶交互

在網頁中的顯示效果如下所示:

HTML+CSS:使用form表單控件,與用戶交互

2)多行文本輸入框

上邊文本輸入框用於輸入單行的文本內容,當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。

使用語法:

詳細講解:

1、結束。

2、cols:用於控制多行輸入域的列數,rows :用於控制多行輸入域的行數。

3、placeholder:當我們的textarea內容為空的時候顯示,用於提示輸入框輸入信息格式;

使用練習:我們創建一個新的表單,表單裡邊包含用戶名和密碼輸入框和用戶個人簡介多行輸入框。具體的代碼如下圖所示:

HTML+CSS:使用form表單控件,與用戶交互

我們再網頁中的顯示效果就如下圖所示:

HTML+CSS:使用form表單控件,與用戶交互

好了,本篇文章就先給大家介紹這兩個表單控件的語法以及使用,下篇文章我們將介紹下拉框、選擇框、多選框的語法及使用,記得要多加練習才是王道。

每日金句:把每一件簡單的事做好就是不簡單;把每一件平凡的事做好就是不平凡

。喜歡我的文章的小夥伴記得關注一下哦,每天將為你更新最新知識。


分享到:


相關文章: