表单标签＜input＞的介绍

    1 input系列标签的基本介绍

        使用场景：在网页中显示收集用户信息的表单效果，如登录页面、注册页面

        代码：

                        <input type=”text” name=”” id=””>

                    input标签可以通过type属性值的不同，展示不同效果

            属性值：

                        text 文本框，用于输入单行文本

                        password 密码框，用于输入密码

                        radio 单选框，用于多选一

                        checkbox 多选框，用于多选多

                        file 文件选择，用于之后上传文件

                        submit 提交按钮，用于提交

                        reset 重置按钮，用于重置

                        button 普通按钮，默认无功能，之后配合js添加功能

                        placeholder 占位符，提示用户输入内容的文本

        例题：

    文本框：
    <input type="text" name="" id="">
    <br&gt; 密码框：
    <input type="password" name="" id="" placeholder="请输入密码">
    <br> 单选框:
    <input type="radio" name="" id="">
    <br> 多选框:
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <br> 文件选择:
    <input type="file" name="" id="">
    <br> 提交按钮:
    <input type="submit" name="" id="">
    <br> 重置按钮:
    <input type="reset" name="" id="">
    <br> 普通按钮:
    <input type="button" name="" id="">

        效果图： 

    1-1 单选框radio

        使用场景：在网页中显示多选一的单选表单控件

        代码：

                    <input type=”radio” name=”” id=”” checked>

                    name 用于分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中

                    checked 默认选中此单选框

        例题：

    <p>单选框radio</p>
    性别：
    <input type="radio" name="sex" id="" checked>男
    <input type="radio" name="sex" id="">女

        效果图： 

    1-2 文件选择file

        使用场景：在网页中显示文件选择的表单控件

        代码：

                    <input type=”file” name=”” id=”” multiple>

                    multiple 多文件选择

        例题：

    <p>文件选择</p>
    <input type="file" name="" id="" multiple>

        效果图：

    1-3 提交按钮submit、重置按钮reset

        使用场景：在网页中显示不同功能的按钮表单控件

        属性值：

                    submit 提交按钮，用于提交数据给后台服务器

                    reset 重置按钮，点击之后恢复表单的默认值

        注意：

                    1 如果需要实现以上按钮功能，需要配合form标签使用

                    2 form标签用于包裹表单标签

        例题：

    <p>表单1</p>
    <form action="">
        用户名:
        <input type="text" name="" id="" placeholder="请输入用户名">
        <br> 密码：
        <input type="password" name="" id="" placeholder="请输入密码">
        <br>
        <input type="submit" name="" id="">
        <input type="reset" name="" id="">
    </form>

        效果图：

    2 button按钮标签

        使用场景：在网页中显示用户点击的按钮

        代码：

                    <button>按钮</button>

        属性值：

                    submit 提交按钮，用于提交数据给后台服务器

                    reset 重置按钮，点击之后恢复表单的默认值

                    button 普通按钮，默认无功能，之后配合js添加功能

        注意：

                    1 谷歌浏览器中button默认是提交按钮

                    2 button标签是双标签，要便于包裹其他内容，比如文字、图片等

        例题：

    <p>button按钮</p>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮，默认无功能，之后配合js添加功能</button>

        效果图：

    3 select下拉菜单标签

        使用场景：在网页提供多个选项的下拉菜单表单控件

        代码：

                    <select name=”” id=””>

                        <option value=”” selected>选项</option>

                    </select>

                    select标签是下拉菜单的整体

                    option标签是菜单的每一项选项

                    selected 默认选中项

        例题：

    <p>select下拉菜单</p>
    <select name="" id="">
        <option value="" selected>北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
    </select>

        效果图： 

    4 textarea文本域标签

        使用场景：在网页中提供可输入多行文本的表单控件

        代码：

                    <textarea name=”” id=”” cols=”30″ rows=”10″></textarea>

                    cols 文本域的可见宽度

                    rows 文本域的可见行数

        注意：

                        1 右下角可以拖拽改变大小

                        2 实际开发时针对于样式效果推荐用CSS设置

        例题：

    <p>textarea文本域</p>
    <textarea name="" id="" cols="30" rows="10" placeholder="文本域的可见范围：10行30列"></textarea>

        效果图：

    5 label标签

        使用场景：常用于绑定内容与表单标签的关系

        代码：

                    <label for=””></label>

            使用方法一：

                        1 使用label标签把内容包裹起来

                        2 在表单标签上添加id属性

                        3 在label标签的for属性值等于表单中的id属性值

            使用方法二：

                        1 直接使用label标签把内容和表单标签一起包裹起来

                        2 把label标签的for属性删除

        例题：

    <p>法一</p>
    性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>
    <p>法二</p>
    <label><input type="radio" name="sex" id="">男</label>
    <label><input type="radio" name="sex" id="">女</label>

         效果图：

   以上是作者学习总结，分享所学，共同进步。如若哪处有误，感谢指出！ 

代码007普通

打赏 收藏 海报 链接