一、前端基础-html-form标签

原创

堕落飞鸟

发布于 2022-02-11 08:44:07

7340

发布于 2022-02-11 08:44:07

文章被收录于专栏：飞鸟的专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- form标签
    1、标签用于为用户输入创建 HTML 表单。
    2、表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
    3、表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
    4、表单用于向服务器传输数据。
-->

<!--
    1、action
    数据提交位置（后端接收数据的位置）
    2、method
    数据提交方法
        1、post方法
            数据在body中，提交时不在url中显示
        2、get方法
            数据在head中,提交时在url中显示
-->
<form action="http://127.0.0.1:8080/login" method="get">
    <!-- input标签
    1、input标签是自闭和标签，可以嵌套p标签
    2、input标签有多种类型
    -->

    <!-- text类型
    1、用于文本输入
    2、name属性的值作为键值对中的key传递给后端
    3、输入的内容作为键值对中的value传递给服务器
     -->
    <p>账号：<input type="text" name="username"></p>

    <!-- password类型
    1、用于密码输入
    2、会隐藏输入内容
    3、name属性的值作为键值对中的key传递给后端
    4、输入的内容作为键值对中的value传递给服务器
    -->
    <p>密码：<input type="password" name="password"></p>

    <!-- checkbox类型
    1、复选框，可以选择多个
    2、name属性的值作为键值对中的key传递给后端
    3、value属性的值作为键值对中的value传递给服务器
    -->
    <p>爱好：吃<input type="checkbox" name="hobby" value="101"></p>
    <p>爱好：喝<input type="checkbox" name="hobby" value="102"></p>
    <p>爱好：玩<input type="checkbox" name="hobby" value="103"></p>
    <p>爱好：乐<input type="checkbox" name="hobby" value="104"></p>

    <!-- radio类型
    1、单选框，只能选择一个
    2、通过设置相同的name属性，绑定关系表示是一组radio
    3、name属性的值作为键值对中的key传递给后端
    4、value属性的值作为键值对中的value传递给后端
    -->
    <p>性别：男<input type="radio" name="sex" value="male"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 女<input type="radio" name="sex" value="female"></p>

    <!-- file类型
    1、用于文件上传
    2、name指定名字,作为键值对的建传递给后端
    3、文件本身作为键值对中的值传递给后端
    4、formenctype上传模式
    -->
    <p>文件上传<input type="file" name="test" formenctype="multipart/form-data"></p>

    <!-- rest类型
    1、重置页面，清空页面输入的内容
    2、可以通过value属性设置按钮显示
    -->
    <p><input type="reset"></p>

    <!-- button类型
    1、仅仅是按钮，配合js使用
    2、可以通过value属性设置按钮显示
    -->
    <p><input type="button" value="按钮"></p>

    <!-- submit类型
    1、用于提交按钮
    2、可以通过value属性设置按钮显示
    -->
    <p><input type="submit" value="登录"></p>

    <!-- select
    1、select是下拉框标签
    2、可以是单选或多选
    -->

    <!-- select属性
    1、通过seletc标签的size属性，可以设置显示条数（默认是1）,通过multiple属性声明是多选，未声明默认单选
    2、通过optgroup可以实现三级菜单，其中的label不能在页面被选中
    3、通过option设置选项，选项内容在页面可以选中
    4、提交时select标签中的name作为键值对的键传递给后端
    5、提交时option标签中的value作为键值对中的值传递给后端
    -->
    <p>城市<select name="city" size="5" multiple>
        <optgroup label="北京"></optgroup>
        <option value="haidian">海淀</option>
        <option value="chaoyang">朝阳</option>
        <option value="tongzhou">通州</option>
        <option value="xicheng">西城</option>

        <optgroup label="河北"></optgroup>
        <option value="shijiazhuang">石家庄</option>
        <option value="tangshan">唐山</option>
        <option value="qinhuangdao">秦皇岛</option>
    </select></p>

    <!-- textarea
    1、文本框，用于文本输入
    2、可以设置行数和列数
    -->
    <textarea cols="5" rows="10">自我介绍</textarea>

    <!-- label
    1、通常和input标签一起使用
    2、将label中的字段和input中的输入框或者按钮关联（通过id），在点击label字段时会自动选中关联的input内容
    -->
    <label for="beizhu">备注</label>
    <input id="beizhu" type="text">
</form>

</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html