HTML5学习-表单标签

表单标签

    1，在HTML中，一个完整的表单通常由表单域，表单控件（也称表单元素）和提示信息3个部分组成
    2，表单域：表单域是一个包含表单元素的区域
                     1)，在HTML中，
标签用于定义表单域，以实现用户信息的收集和传递。 会把他范围内的表单元素信息提交给服务器
                     2)，格式
                                 
                                        各种表单元素控件
                                 
                      3)，常用属性：
                                   action            属性值 ：URL地址            作用： 用于指定接收并处理表单数据的服务器程序的URL地址
                                   method                        get/post                            用于设置表单数据的提交方式，其取值为get/post
                                   name                            名称                                  用于指定表单的名称，以区分同一个页面中多个表单域    
 3，表单控件（表单元素）
                     1）说明：在表单中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
                     2）成员
                              A,  input输入表单元素  ：用于收集用户信息
                                    1,type属性：在标签中，包含type属性，根据不同的type值，输入字段有很多种形式（文本，字段，复选框，掩码后的文本控件，单选按钮，按钮等）
                                             格式：
                                                        单标签
                                                        属性值               描述
                                                        button                定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
                                                        check                定义复选框
                                                        file                     定义输入字段和“浏览”按钮，共文件上传
                                                        hidden               定义隐藏的输入字段
                                                        image                定义图像形式的提交按钮
                                                        password           定义密码字段，该字段中的字符被掩饰
                                                        radio                  定义单选按钮
                                                        reset                  定义重置按钮，重置按钮会清除表单中的所有数据
                                                        submit               定义提交按钮。提交按钮会把表单数据发送到服务器
                                                        text                     定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符
                                       2, name属性：
                                                        属性值 ：由用户自定义            描述：定义input元素的名称
                                       3, value属性：
                                                        属性值：用户自定义                 描述：规定input元素的值
                                       4, checked属性：
                                                         属性值：checked                     描述：规定input元素首次加载时应当被选中
                                        5,maxlength属性
                                                          属性值：正整数                         描述：规定输入字段中的最大长度。
                                       6，注意：
                                               name和value是每一个表单元素都有的属性值，主要给后台人员使用
                                                name表单元素的名字，要求单选按钮和复选框有相同的name值
                                       7，示例：

        <form action="xxx.php" method="get">         
        <!-- text 文本框 用户可以里面输入任何文字 -->        
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br>        
        <!-- password 密码框 用户看不见输入的密码 -->        
        密码: <input type="password" name="pwd" >  <br>        
        <!-- radio 单选按钮  可以实现多选一 -->        
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->        
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->        
        性别: 男 <input type="radio" name="sex" value="男"> 女  <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">  打豆豆 <input type="checkbox" name="hobby" checked="checked">        <br>
        <-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->        
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->        
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->        
        上传头像:  <input type="file" >    
        </form>

                        B,select下拉表单元素
                                       1,使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间，我们就可以使用标签控件定义下拉列表。
                                       2,语法： 
                                               
                                               选项1
                                               选项2
                                               选项3
                                               
                                       3,注意：
                                              中至少包含一对
                                              在中定义select="select"时，当前项即为默认选中项
                                       4，实例：
                                      
    语言:   
                                                  
                                                 Java       
                                                 C++        
                                                 Python        
                                                 火星   
                                                 
                                        
                        D，textarea文本域元素  
                                    1，使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。
                                    2，在表单元素中，<textarea>标签适用于定义多行文本输入的控制，使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论
                                    3，语法：
                                    <textarea row="3" cols="20"> 文本内容 
                                    4，注意：
                                             通过标签可以轻松地创建多行文本输入框
                                             cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用css来改变大小的
                                     5，代码示例：
                                               <form>        今日反馈:        
                                                          <textarea cols="50" rows="5">写入文本