前端學習 -- Html&Css -- 表單

表單的作用就是用來将使用者資訊送出給伺服器的，比如：百度的搜尋框 注冊 登入這些操作都需要填寫表單。

使用form标簽建立一個表單，form标簽中必須指定一個action屬性，該屬性指向的是一個伺服器的位址，當我們送出表單時将會送出到action屬性對應的位址。

使用form建立的僅僅是一個空白的表單，我們還需要向form中添加不同的表單項。

在表單中可以使用fieldset來為表單項進行分組，可以将表單項中的同一組放到一個fieldset中。

在fieldset可以使用legend子标簽，來指定組名。

使用input來建立一個文本框，它的type屬性是text，如果希望表單項中的資料會送出到伺服器中，還必須給表單項指定一個name屬性,name表示送出内容的名字。

使用者填寫的資訊會附在url位址的後邊以查詢字元串的形式發送給伺服器。

url位址?查詢字元串

格式：

屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值

在文本框中也可以指定value屬性值，該值将會作為文本框的預設值顯示。

 使用input來建立一個單選按鈕，它的type屬性使用radio；

 單選按鈕通過name屬性進行分組，name屬性相同是一組按鈕；

 像這種需要使用者選擇但是不需要使用者直接填寫内容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值将會最終送出給伺服器。

如果希望在單選按鈕或者是多選框中指定預設選中的選項，則可以在希望選中的項中添加checked="checked"屬性。

使用input建立一個多選框，它的type屬性使用checkbox。

- 使用select來建立一個下拉清單

下拉清單的name屬性需要指定給select，而value屬性需要指定給option，可以通過在option中添加selected="selected"來将選項設定為預設選中。

當為select添加一個multiple="multiple"，則下拉清單變為一個多選的下拉清單。

在select中可以使用optgroup對選項進行分組，同一個optgroup中的選項是一組，可以通過label屬性來指定分組的名字。

使用textarea建立一個文本域。

送出按鈕可以将表單中的資訊送出給伺服器，使用input建立一個送出按鈕,它的type屬性值是submit，在送出按鈕中可以通過value屬性來指定按鈕上的文字。

<input type="reset" />可以建立一個重置按鈕，點選重置按鈕以後表單中内容将會恢複為預設值。

使用input type=button可以用來建立一個單純的按鈕，這個按鈕沒有任何功能，隻能被點選。

除了使用input，也可以使用button标簽來建立按鈕，這種方式和使用input類似，隻不過由于它是成對出現的标簽，使用起來更加的靈活。

 form.html:

target.html

看下界面：

點選送出進入target.html頁面，點選重置頁面内容恢複初始狀态。

代碼github位址：

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/form.html

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/target.html

可以自己跑下看看效果