---
# System prepended metadata

title: 表單標籤
tags: [Html 標籤]

---

# 表單標籤
###### tags: `Html 標籤`
```htmlembedded=

<!--需求1：創建一個人信息註冊的表單頁面，包含用戶名、密碼、確認密碼。性別(單選)、
興趣愛好(多選)、國籍(下拉列表)、隱藏域、自我評價(多行文本域)、重置、提交-->

<!--
    form標籤就是表單
        input type="text"     是文本輸入框 value是設置默認顯示內容，其中name属性必须要指定，否则这个文本匡的数据将来是不会发送给服务器的
        input type="password" 是密碼輸入框 value是設置默認顯示內容
        input type="radio"    是單選框    name屬性可以對其進行分組，属性值保持一致，才有互斥的效果 checked="checked"表示默認選中
        input type="checkbox" 是複選框    checked="checked"表示默認選中。name属性值建议保持一致，这样将来我门的服务器端获取值的食后获取的是一个数组。
        input type="reset"    是重置按鈕  value修改按鈕上的文本
        input type="submit"   是提交按鈕  value修改按鈕上的文本
        input type="button"   是按鈕      value修改按鈕上的文本
        input type="file"     是文件上傳域
        input type="hidden"   是隱藏域   當我們要發送某些信息，而這些信息不需要用戶參與，就可以使用隱藏域(提交的時候發送給服務器)

        select標籤是下拉列表框
            option標籤是下拉列表的選項，其中value属性是发送给服务器的值 selected="selected"設置默認選中

        textarea表示多行文本輸入框(起始標籤和默認標籤之間是默認值)，他的value值就是开始与结束标签之间的内容
            rows屬性可以設置顯示幾行的高度
            cols屬性可以設置顯示幾行的框度


    -->
    <form>
        <h1 align="center">用戶註冊</h1>
        <table align="center">
            <tr>
                <td>用戶名稱：</td>
                <td>
                    <input type="text" value="默認值"/>
               </td>
            </tr>
            <tr>
                <td>用戶密碼：</td>
                <td><input type="password"/><br/></td>
            </tr>
            <tr>
                <td>確認密碼：</td>
                <td> <input type="password"/><br/></td>
            </tr>
            <tr>
                <td>性別：</td>
                <td> <input type="radio" name="sex" checked="checked"/>男
                     <input type="radio" name="sex"/>女
                </td>
            </tr>
            <tr>
                <td>興趣愛好：</td>
                <td>
                     <input type="checkbox" checked="checked"/>Java
                     <input type="checkbox"/>JavaScript
                     <input type="checkbox"/>c++
                </td>
            </tr>
            <tr>
                <td> 國籍：</td>
                <td><select><option>--請選擇國籍--</option>
                    <option selected="selected">--中國--</option>
                    <option>--美國--</option>
                    <option>--日本--</option></select></td>
            </tr>
            <tr>
                <td>自我評價：</td>
                <td>
                    <textarea rows="10" cols="20">我才是默認值</textarea></td>
            </tr>
            <tr>
                <td><input type="reset" value="重置"/></td>
                <td align="center"><input type="submit"/></td>
<!--                    <input type="button"/><br/>-->
<!--                    <input type="file"/><br/>-->
<!--                    <input type="hidden" name="abc" value="123"/>-->
            </tr>
        </table>
    </form>
```
![](https://i.imgur.com/UtuLDeE.png)
