表单的简单使用

最新推荐文章于 2022-06-24 20:32:03 发布

独孤小白狐

最新推荐文章于 2022-06-24 20:32:03 发布

阅读量226

点赞数

分类专栏：前端文章标签：表单

本文链接：https://blog.csdn.net/zzzyukun/article/details/118970364

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

表单标签

<body>
    <!--
        表单标签：<form>
        属性：
            action-提交的路径
            method-提交的方式(get和post)
            autocomplete-记录补全(on和off)
    -->
    <!--get方式的表单-->
    <form action="#" method="get" autocomplete="off">
        用户名：<input type="text" name="username"/>
        <button type="submit">提交</button>
    </form>

    <!--post方式的表单-->
    <form action="#" method="post" autocomplete="off">
        用户名：<input type="text" name="username"/>
        <button type="submit">提交</button>
    </form>
</body>

表单项标签

<body>
    <!--
        表单项标签：<label>  表单元素说明
        属性：for属性，属性值必须和表单项标签id属性值一致

        表单项标签：<input>   多种类型数据
        属性：
            type-数据类型
            id-唯一标识
            name-提交服务器的标识
            value-默认的数据值
            placeholder-默认的提示信息
            required-是否必须

        按钮标签：<button>
        属性：
            type-按钮的类型(submit提交、reset重置、button普通按钮)
    -->
    <form action="#" method="get" autocomplete="off">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" value="" placeholder=" 请在此处输入用户名" required/>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>
</body>

表单项标签type属性

<body>
    <!--
        type属性
        <input type="text"/>       普通文本输入框
        <input type="password"/>   密码输入框
        <input type="email"/>      邮箱输入框
        <input type="radio"/>      单选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中
        <input type="checkbox"/>   多选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中


        <input type="date"/>       日期框
        <input type="time"/>       时间框
        <input type="datetime-local"/>  本地日期时间框
        <input type="number"/>     数字框
        <input type="range"/>      滚动条数值框  min-最小值   max-最大值  step-步进值
        <input type="search"/>     可清除文本框
        <input type="tel"/>        电话框
        <input type="url"/>        网址框
        <input type="file"/>       文件上传框
        <input type="hidden"/>     隐藏域   value属性设置实际提交的值
    -->
    <form action="#" method="get" autocomplete="off">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"/>  <br/>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password"/> <br/>

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email"/> <br/>

        <label for="gender">性别：</label>
        <input type="radio" id="gender" name="gender" value="men"/>男
        <input type="radio" name="gender" value="women"/>女
        <input type="radio" name="gender" value="other"/>其他<br/>

        <label for="hobby">爱好：</label>
        <input type="checkbox" id="hobby" name="hobby" value="music" checked/>音乐
        <input type="checkbox" name="hobby" value="game"/>游戏 <br/>

        <label for="birthday">生日：</label>
        <input type="date" id="birthday" name="birthday"/> <br/>

        <label for="time">当前时间：</label>
        <input type="time" id="time" name="time"/> <br/>

        <label for="insert">注册时间：</label>
        <input type="datetime-local" id="insert" name="insert"/> <br/>

        <label for="age">年龄：</label>
        <input type="number" id="age" name="age"/> <br/>

        <label for="range">心情值(1~10)：</label>
        <input type="range" id="range" name="range" min="1" max="10" step="1"/> <br/>

        <label for="search">可全部清除文本：</label>
        <input type="search" id="search" name="search"/> <br/>

        <label for="tel">电话：</label>
        <input type="tel" id="tel" name="tel"/> <br/>

        <label for="url">个人网站：</label>
        <input type="url" id="url" name="url"/> <br/>

        <label for="file">文件上传：</label>
        <input type="file" id="file" name="file"/> <br/>

        <label for="hidden">隐藏信息：</label>
        <input type="hidden" id="hidden" name="hidden" value="itheima"/> <br/>

        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
</body>

其他常用表单标签

<body>
    <!--
        下拉列表标签：<select>
        列表项标签：<option>
        列表项分组标签：<optgroup>   属性：label设置分组名称

        文本域标签：<textarea>
        属性：
            rows-行数
            cols-列数
    -->
    <form action="#" method="get" autocomplete="off">
        所在城市：<select name="city">
            <option>---请选择城市---</option>
            <optgroup label="直辖市">
                <option>北京</option>
                <option>上海</option>
            </optgroup>
        <optgroup label="省会市">
            <option>杭州</option>
            <option>武汉</option>
        </optgroup>
    </select>
        <br/>

        个人介绍：<textarea name="desc" rows="5" cols="20"></textarea>

        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
</body>