表单标签＜input＞的介绍

    1 input系列标签的基本介绍

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

        代码：

                        

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

            属性值：

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

                        password 密码框，用于输入密码

                        radio 单选框，用于多选一

                        checkbox 多选框，用于多选多

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

                        submit 提交按钮，用于提交

                        reset 重置按钮，用于重置

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

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

        例题：

    文本框：
    
    
 密码框：
    
    
 单选框:
    
    
 多选框:
    
    
    
    
 文件选择:
    
    
 提交按钮:
    
    
 重置按钮:
    
    
 普通按钮:
    

        效果图： 

 

    1-1 单选框radio

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

        代码：

                    

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

                    checked 默认选中此单选框

        例题：

    
单选框radio
    性别：
    男
    女

        效果图： 

 

    1-2 文件选择file

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

        代码：

                    

                    multiple 多文件选择

        例题：

    
文件选择
    

        效果图：

 

 

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

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

        属性值：

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

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

        注意：

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

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

        例题：

    
表单1
    

        用户名:
        
        
 密码：
        
        

        
        
    

        效果图：

 

    2 button按钮标签

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

        代码：

                    按钮

        属性值：

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

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

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

        注意：

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

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

        例题：

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

        效果图：

 

    3 select下拉菜单标签

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

        代码：

                    

                        

选项

                    

                    select标签是下拉菜单的整体

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

                    selected 默认选中项

        例题：

    
select下拉菜单
    
        北京
        上海
        广州
        深圳
    

        效果图： 

 

    4 textarea文本域标签

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

        代码：

                    

                    cols 文本域的可见宽度

                    rows 文本域的可见行数

        注意：

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

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

        例题：

    
textarea文本域
    

        效果图：

 

    5 label标签

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

        代码：

                    

            使用方法一：

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

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

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

            使用方法二：

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

                        2 把label标签的for属性删除

        例题：

    
法一
    性别：
    男
    女
    
法二
    男
    女

         效果图：

---

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