表单项标签

最新推荐文章于 2024-05-31 01:27:40 发布

uzi2200

最新推荐文章于 2024-05-31 01:27:40 发布

阅读量191

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/uzi2200/article/details/108083479

版权

简单的注册表单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        /*style标签内部可以存放css属性或者注释*/
        table{/*选中所有的table元素*/
            border: 2px solid red;
            /*合并单元格边框*/
            border-collapse: collapse;
            /*设置表格背景颜色*/
            background: lightgray;
            /*设置宽度为70%*/

            /*水平居中*/
            margin-left: auto;
            margin-right: auto;
        }
        td,th{/*选中所有的td元素*/
            border: 2px solid red;
            /*合并单元格边框*/
            border-collapse: collapse;
            /*内边距，单元格边框和内容之间的距离*/
            padding: 5px;
        }
        h1{
            /*设置内容居中*/
            text-align: center;
        }
        textarea{
            resize: none;
        }
    </style>
</head>
<body>
<h1>欢迎注册</h1>
<form action="#"method="get">
    <table>
        <tr><!--第一行，用户名-->
            <td>用户名：</td>
            <td><!--普通文本输入框-->
                <input type="text" name="username"/>
            </td>
        </tr>
        <tr><!--第二行，密码-->
            <td>密码：</td>
            <td><!--密码输入框-->
                <input type="password" name="pwd"/>
            </td>
        </tr>
        <tr><!--第三行，性别-->
            <td>性别：</td>
            <td><!--单选框-->
                <input type="radio"  checked="checked"name="gender" value="male"/>男
                <input type="radio" name="gender" value="female"/>女
            </td>
        </tr>
        <tr><!--第四行，爱好-->
            <td>爱好：</td>
            <td><!--多选框-->
                <input type="checkbox"  checked="checked"name="like" value="basketball"/>篮球
                <input type="checkbox"name="like" value="football"/>足球
                <input type="checkbox"name="like" value="volleyball"/>排球

            </td>
        </tr>
        <tr><!--第五行，城市-->
            <td>城市：</td>
            <td ><!--下拉框-->
               <select name="city"><!--定义一个下拉框-->
                   <option>北京</option>
                   <option selected="selected">上海</option>
                   <option>广州</option>
                   <option>深圳</option>
               </select>

            </td>
        </tr>
        <tr><!--第六行，自我描述-->
            <td>自我描述：</td>
            <td><!--多行文本输入框框-->
              <textarea cols="30" rows="5" placeholder="请输入自我描述..." name="description"></textarea>

            </td>
        </tr><!--提交按钮-->
            <td colspan="2" style="text-align: center"><!--colspan指定单元格横跨的列数,rowspan指定单元格竖跨的行数-->
                <input type="submit" value="提交">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

表单项标签的细节
1、提交表单时，表单中的数据为什么没有被提交？
在表单中，每一个要提交数据的表单项标签都要具有name属性

<!-- 第一行: 用户名 -->

<input type="text"  name="username"/>

<!-- 第二行: 密码 -->

<input type="password"  name="pwd"/>

2、如何让多个单选框只能有一个被选中？
可以设置这多个单选框的name属性值，只要name属性值相同，这多个单选框就是一个组的框，一个组的框中只能有一个被选中！

<input type="radio"  name="gender"/>男

<input type="radio"  name="gender"/>女

3、为什么单选框、复选框选择后提交时的值都是on?
如果单选框或者复选框没有添加value属性，选择任何一个选项在最终提交时的值都是on值，这样服务器无法区分用户到底选择的是什么选项。
因此我们需要通过value属性为单选框和复选框设置选项被选中后所提交的值

<!-- 单选框 -->

<input type="radio"  name="gender"  value="male"/>男

<input type="radio"  name="gender"  value="female"/>女

<!-- 复选框/多选框 -->

<input type="checkbox"  name="like"  value="basketball"/>篮球

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

<input type="checkbox"  name="like"  value="volleyball"/>排球

4、如何设置单选框或复选框默认选中某一项?
只要在单选框或复选框元素上添加一个checked属性，值为checked，就可以让当前选项默认被选中！

<!-- 单选框 -->

<input type="radio"  checked="checked"  name="gender"  value="male"/>男

<input type="radio"  name="gender"  value="female"/>女

<!-- 复选框/多选框 -->

<input type="checkbox"  name="like"  value="basketball"/>篮球

<input type="checkbox"  checked="checked"  name="like"  value="football"/>足球

<input type="checkbox"  name="like"  value="volleyball"/>排球

5、如何设置下拉选框默认选中某一项?

只需要在下拉选框中的option标签上添加一个selected属性，值为selected，就可以让当前的option选项默认被选中，例如：

<!-- 下拉选框 -->

<select  name="city"> <!-- 定义一个下拉选框 -->

    <option>北京</option>

    <option selected="selected">上海</option>

    <option>广州</option>

    <option>深圳</option>

</select>

6、下拉选框中option选项上的value属性的作用是什么？
选中某一个option选项，在提交表单时，如果option上没有设置value属性，就会将option标签中的文本作为值进行提交。

如果option上添加了value属性，在提交表单时，就会提交value属性的值。

<select  name="city"> <!-- 定义一个下拉选框 -->

    <option value="bj">北京</option>

    <option value="sh"  selected="selected">上海</option>

    <option>广州</option>

    <option>深圳</option>

</select>

uzi2200

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单项标签

简单的注册表单案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title> <style> /*style标签内部可以存放css属性或者注释*/ table{/*选中所有的table元素*/ border: 2px solid red;
复制链接

扫一扫