JavaWeb學習之路(22)–HTML之表單與輸入标簽

1. 前言

之前我們所講的一些系列各種HTML标簽，都是為了給使用者展示一些東西。

實際上HTML是可以讓使用者輸入資訊的，例如登入時輸入使用者名密碼；購買東西時選擇型号、顔色；釋出部落格時輸入标題、内容。

HTML通過表單及輸入标簽，來實作使用者輸入内容的收集。

2. 表單标簽

表單标簽，格式為<form>表單内容</form>，中間的表單内容部分就是用來讓使用者輸入内容的。

表單有兩個重要的屬性action和method，如下：

  <form action="#" method="get">

   </form>

1

2

3

其中action屬性表示表單送出後，哪個背景程式負責處理這個請求，這個涉及到我們JavaWeb後端學習的内容，大家到此大概知道這個參數的意思就行。action="#"中#号并不是一個可以接受請求的位址，使用#的意思就是該表單目前不指定背景處理程式。

然後是method參數，這個也涉及網頁前端和背景程式互動方式了，method可以選擇get/post值，這兩個值代表着表單内容送出到背景的不同方式，具體也是等我們學習JavaWeb後端的時候具體了解，此時大體知道就行。

3. 表單輸入标簽

好的，現在我們知道如何編寫表單了，還需要在表單内添加輸入标簽，輸入标簽的作用就是讓使用者輸入東西的。

3.1 文本框

文本框用來讓使用者輸入一段文本，格式如下：

<form action="#" method="POST">

       請輸入姓名: <input type="text" name="username"><br>

其中<input>表示這是一個輸入标簽，type="text"表示這個輸入标簽的類型是文本框，最後name="username"是給這個輸入标簽起了個名字，之是以要起名字，是當網頁上有多個輸入标簽時，能把他們區分開。

文本框輸入效果如下：

3.2 密碼框

密碼框也是用來輸入文本的，但是密碼框為了保護密碼的私密性，輸入的内容會被隐藏，别人是看不到的，例如：

請輸入與密碼：<input type="password" name="password"><br>

效果如下：

3.3 單選框

單選框用于從若幹選項中選擇其中一個，例如性别隻能從男、女中選擇一個：

       請選擇性别：

       <input type="radio" name="sex" value="male">男

       <input type="radio" name="sex" value="female">女

4

5

注意這兩個單選框都是表示性别，是以name相同。還有一個重要屬性是value，當我們的表單送出給背景程式時，會将選中項的value值送出到背景，這樣背景就知道使用者從網頁上選擇了哪個選項了。

上面代碼效果如下：

3.4 複選框

單選框隻能選擇一個，複選框可以選擇多個，例如可以選擇興趣愛好：

 <form action="#" method="POST">

       請選擇愛好：

       <input type="checkbox" name="hobby" value="basketball">籃球

       <input type="checkbox" name="hobby" value="football">足球

由于兩個複選框都是表示愛好，是以name相同。當表單送出到背景時，會将選中項的value值全部傳遞給背景程式。

上面的例子效果如下：

3.5 按鈕

表單内還需要包含按鈕，一般來說，點選按鈕後會将表單送出給背景。

按鈕其實分2大類，送出按鈕點選後會送出表單，但是普通按鈕點選後則不會送出表單，例如：

       <br>

       <input type="button" value="普通按鈕">

       <input type="submit" value="送出按鈕">

6

7

8

可以嘗試下，點選普通按鈕沒反應，但是點送出按鈕，頁面會重新整理一下。

這樣可能不夠直覺，我們修改下表單送出的action如下：

<form action="http://www.baidu.com" method="POST">

也就是說，我們的表單送出給百度去處理(當然百度不會搭理我們，因為百度不是我們開發的，不會理會我們的請求)。

此時點選普通按鈕，沒反應，因為表單不會送出。而點選送出按鈕，則會進入百度網頁，表示目前資訊交給百度處理了。

4. 小結

表單是用來讓使用者輸入資訊的，網頁正是因為有了互動性，才變得生動有趣！

另外大家可能對前端、背景的概念不夠熟悉，此處稍微解釋下。

前端就是網頁能看到的部分，而背景時網頁的内容送出後進行分析處理的程式。我們目前學習的HTML輸入網頁前端開發，因為HTML的内容都會顯示在網頁中。