• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

表单标签

1年前 (2021-07-26) 1210次浏览 已收录 0个评论

在html中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息2个部分组成。

表单域

<form>标签用于定义表单域,以实现用户信息的收集与传递,表单域包含多少信息就提交多少信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单域</title>
</head>
<body>
    <form action="demo.php" method="POST" name="name1">

    </form>
</body>
</html>

表单控件

  • input 输入表单元素
  • select 下拉表单元素
  • textarea 文本域元素

<input>表单元素

在<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type="属性值" />

除type属性外,<input>标签还有其他属性

在包含radio或者checkbox属性的标签中,如果信息是一组,必须给他们命名相同的name名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input表单元素</title>
</head>
<body>
    <form>
    <action="xxx.php" method="get" name="name1">
        <!--text 文本框 用户可以在里面收入任何文字,且用户最多只能输入6个字符-->
        用户名:<input type="text" name="username" value="默认提交值" maxlength="6"><br />
        <!-- password 密码框 用户看不见输入的内容 -->
        密码:<input type="password" name="pwd"><br />
        <!-- radio 单选按钮 name是表单元素名字,只有选项有相同的名字name时,radio才可以实现多选一 -->
        <!-- 单选按钮和复选按钮可以设置checked属性,当页面打开时默认选中这个按钮。 -->
        性别:男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"><br />
        <!-- checkbox 复选框 可以实现多选 -->
        爱好:吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="吃饭"> 打游戏 <input type="checkbox" name="hobby" value="打游戏"> <br>
        <!-- 点击了提交按钮,可以把表单域form里面的表单元素里面值提交给后台服务器了 -->
        <input type="submit" value="注册">
        <!-- 重置按钮可以还原表单元素的默认状态 -->
        <input type="reset" value="重新填写"><br>
        <!--普通按钮 button 后期结合js使用-->
        <input type="button" value="获取验证码"><br>
        <!-- 文件域 上传文件使用的 -->
        上传头像:<input type="file">
    </form>
</body>
</html>
结果演示

<label>标签

<label>标签用于绑定一个表单元素,当点击<label》标签内的文本时,浏览器就会自动将焦点光标转到或选择到对应表单元素上,用来增加用户体验 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签</title>
</head>
<body>
    <label for="flag">用户名:</label><input type="text" id="flag">
    <input type="radio" id="flag_nan" name="sex"><label for="flag_nan">男</label>
</body>
</html>
结果演示

<select>下拉表单元素

在页面中,如果有多个选项让用户选择时,可以使用<select>标签控件定义下拉列表,来节省页面空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select下拉表单</title>
</head>
<body>
    <form>
        <action="xxx.php" method="get" name="name1"></action>
        籍贯:
        <select>
            <option>山东</option>
            <option selected="selected">河南</option>
            <option>浙江</option>
        </select>
    </form>
</body>
</html>
在<option>中定义selectde=”selected”时,可以作为默认选中项。
结果演示

<textarea>表单元素

当用户输入内容较多的情况下,就不能再使用文本框表单了,我们可以使用<textarea>标签,在表单元素中,<textarea>标签是用于定义多行文本输入的控件。

  • cols=“每行中的字符数
  • rows=“显示的行数”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea 文本域</title>
</head>
<body>
    <form>
        <action="xxx.php" method="get" name="name1"></action>
        今日反馈
        <textarea cols="20" rows="30">请输入...
        </textarea>
    </form>
</body>
</html>
结果演示

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
</head>
<body>
        <table width="500">
            <form>
            <action="xxx.php" method="get" name="name1"></action>
            <tr>
                <td>性别:</td>
                <td>
                    <label for="nan"><img src="img/man.jpg">男</label><input type="radio" name="sex" id="nan" value="男">
                    <label for="nv"><img src="img/women.jpg">女</label><input type="radio" name="sex" id="nv" value="女"><br>
                </td>
            </tr>
            <tr>
                <td>生日:</td>
                <td>
                    <select>
                        <option >请选择年份</option>
                        <option>2018</option>
                        <option>2019</option>
                    </select>
                    <select>
                        <option >请选择月份</option>
                        <option>1</option>
                        <option>2</option>
                    </select>
                    <select>
                        <option >请选择日</option>
                        <option>4</option>
                        <option>20</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>所在地区:</td>
                <td>
                    <input type="text" value="北京" name="add">
                </td>
            </tr>
            <tr>
                <td>婚姻状况:</td>
                <td>
                    <label for="wh">未婚</label><input type="radio" name="hy" value="未婚" id="wh" checked="checked">
                    <label for="yh">已婚</label><input type="radio" name="hy" value="已婚" id="yh">
                    <label for="lh">离婚</label><input type="radio" name="hy" value="离婚" id="lh">
                </td>
            </tr>
            <tr>
                <td>学历:</td>
                <td>
                    <input type="text" value="本科" name="xl">
                </td>
            </tr> 
            <tr>
                <td>喜欢的类型:</td>
                <td>
                    <input type="checkbox" name="xh" value="可爱的" id="wm"><label for="wm">妩媚</label>
                <input type="checkbox" name="xh" value="善良的" id="ka"><label for="ka">可爱</label>
                <input type="checkbox" name="xh" value="都喜欢" id="dxh" checked="checked"><label for="dxh">都喜欢</label>
                </td>
            </tr>
            <tr>
                <td>个人介绍:</td>
                <td>
                    <textarea cols="20" rows="2">个人简介</textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18</li>
                        <li>真诚</li>
                    </ul>
                </td>
            </tr>
        </form>
        </table>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:表单标签
喜欢 (6)

您必须 登录 才能发表评论!