八. 表单标签

表单标签

表单是一个包含表单元素的区域，表单元素允许用户在表单中输入内容如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)。

文本域

type="text"字段来实现，代码如下：

<form>
        账号：<input type="text">
        密码：<input type="text">
</form>

浏览器展示如下:

密码字段

输入密码通常不会以明文展示，type=“password”，字段来实现代码如下：

<form>
        账号：<input type="text">
        密码：<input type="password">
</form>

浏览器展示如下：

单选按钮

通过type="radio"来实现，代码如下：

<form>
        账号：<input type="text"><br>
        密码：<input type="password"><br>
        性别：<input type="radio" name="gender">男
        <input type="radio" name="gender">女
</form>

浏览器展示如下：

单选框的name必须为同一个值，否则可以多选
设置默认姓名的选项，可在默认的单选框后添加checked选项

性别：<input type="radio" name="gender" checked>男

复选框

通过type="checkbox"来实现，代码如下：

<form>
        账号：<input type="text"><br>
        密码：<input type="password"><br>
        性别：<input type="radio" name="gender" checked>男
        <input type="radio" name="gender">女<br>
        爱好：<input type="checkbox" name="basketball">篮球
        <input type="checkbox" name="shopping">逛街
        <input type="checkbox" name="game">游戏
</form>

浏览器效果如下：

提交按钮

type=“submit” 定义了提交按钮，代码如下：

    <form>
        账号：<input type="text"><br>
        密码：<input type="password"><br>
        性别：<input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="famale">女<br>
        爱好：<input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="shopping">逛街
        <input type="checkbox" name="hobby" value="game">游戏<br>
        <input type="submit" name="提交">
    </form>

浏览器效果如下：

当点击提交查询按钮后，浏览器地址栏显示你提交的信息

text.html?username=123&password=123&gender=male&hobby=basketball&hobby=shopping&提交=提交查询

提交的信息以键值对的形式提交，key为我们在各个元素所设置的"name"属性，value则各不相同，文本框的value属性为输入的内容，单选框的属性则为设置的"value"属性。