CSS17.常用表单

最新推荐文章于 2022-09-04 20:02:03 发布

时光无错孤独难谈

最新推荐文章于 2022-09-04 20:02:03 发布

阅读量90

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104327554

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">


        
        </style>


    </head>
        
    <body>
        <!-- 只要表单要提交到服务器，name是必须的 -->
        <!-- 
            表单的作用就是用来将用户信息提交给服务器
                比如:百度搜索框 注册 登录都需要填写表单
         -->

        

         <!-- 
             使用form标签创建表单       
                form必须制定一个action属性，该属性指向的是一个服务器地址
                当我们提交表单时会提交到服务器地址

          -->
        <form action="26完善clearfix.html">
            <!-- 
                使用form创建的仅仅是一个空表单
                    我们还需要向form中添加不同表单项
             -->

             <!-- 
                 使用input创建文本框，他的type属性是text（单行文本框）
                    如果希望表单项中数据提交到服务器，还需要给表单项制定一个name属性

                用户填写的信息会附在url地址后以查询字符串的形式提交给服务器
                    样式: url地址?查询字符串
                    格式: 属性名=属性值&属性名=属性值&属性名=属性值
                    在文本框中也可以指定value属性值，该值作为文本框默认显示

              --> 

                <!-- 
                    使用fieldset为表单项分组
                    可以将同一组放到fieldset中
                -->
              
            <fieldset>
                <!-- 指定组名legenf标签 -->
                <legend>用户信息</legend>
                <!-- 
                    HTML还提供了一个lable标签，用来选中表单中提示文字
                        该标签可以指定for属性，需要指定一个表单项的ID值
                -->
                <label for="um">用户名</label>
                <input id="um" type="text" name="USENAME" value="在这里填写用户名" style="color: rgba(162, 165, 158, 0.603);"/><br>
                <!-- 
                    使用input创建密码框，他的type属性是password
                -->
                <label for="pass">密码</label>
                <input id="pass" type="password" name="PASSWORD"/>
            </fieldset>
             <br>
            <!-- 
                单选按钮
                    -使用input创建单选按钮，他的type属性是radio
                    -单选按钮通过name属性进行，name属性相同的是一组按钮
                    （让用户选择的不需要填的必须有value）
                        还需要指定一个value属性，这样选中表单的value会提交给服务器
                如果希望单选和多选默认被选中就添加 checked="checked"属性
             -->
            <label for="umm">性别</label>
            <input id="umm" type="radio" name="gender" value="man"/>男
            <input id="umm" type="radio" name="gender" value="woman" checked="checked"/>女
                <br><br>

            <!-- 
                多选框
                    -使用input创建单选按钮，他的type属性是checkbox
             -->
            爱好<input type="checkbox" name="love" value="football"/>足球
                <input type="checkbox" name="love" value="basketball"/>篮球
                <input type="checkbox" name="love" value="pingpaang"/>乒乓球
                <input type="checkbox" name="love" value="badminton"/>羽毛球
            <br><br>


            <!-- 
                下拉列表
                    -使用select创建下拉列表
                    -下拉列表的name属性指定给select，value属性给option
                默认选中在option添加 selected="selected"
                select中添加属性 multiple="multiple"，变成多选下拉列表
             -->
              <!-- 在下拉列表中用option创建列表项 -->
             你喜欢的数字
            <select name="star" >
                <!-- 
                    在select使用optgroup分组 
                        同一个optgroup中的选项是一组
                -->
                <optgroup label="大数字">
                    <option value="3" selected="selected">3</option>
                    <option value="4">4</option>
                </optgroup>
                <optgroup label="小数字">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </optgroup>
            </select>


            <!-- 
                使用textarea创建多行文本框
             -->
            自我介绍<textarea name="info"></textarea>
             <br><br><br>
            <!-- 
                提交按钮可以将表单中的信息提交给服务器
                使用input创建提交按钮，他的type属性是submit
                在提交按钮上可以通过value来指定按钮上的文字
             -->
             <input type="submit" value="注册"/>
             <!-- 重置按钮,点击表单恢复默认 -->
             <input type="reset"/>
             <!-- 
                 使用type="button"可以创建单纯按钮没有功能
                 结合js用
              -->
              <input type="button" value="点击"/>
              <br><br>
              <!-- 
                  button也可以创建按钮
                  用法和input类似，成对出现，更加灵活
               -->
               <button type="submit">提交2</button>
               <button type="reset">重置2</button>
               <button type="button">按钮2</button>
        </form>

    </body>


</html>