HTML表单标签及CSS

最新推荐文章于 2023-07-16 19:06:01 发布

weixin_45701378

最新推荐文章于 2023-07-16 19:06:01 发布

阅读量101

点赞数

分类专栏： WEB初级 HTML

本文链接：https://blog.youkuaiyun.com/weixin_45701378/article/details/119740850

版权

WEB初级同时被 2 个专栏收录

15 篇文章

订阅专栏

HTML

8 篇文章

订阅专栏

本文详细讲解了HTML表单标签的使用，包括form元素、各种表单项（input、select、textarea）的属性设置，以及CSS的选择器和属性应用，教你如何创建美观且功能完备的表单，提升网站交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML标签：表单标签

表单

概念：用于采集用户输入的数据，用于和服务器进行交互
form：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围

表单属性

action：指定提交数据的URL
method：指定提交方式
分类：一共7种，两种比较常用
get:
1、请求参数会在地址栏中显示。会封装到请求行中
2、请求参数大小是有限制的
3、不太安全
post:
1、请求参数不会在地址栏中显示
2、请求参数的大小没有限制
3、较为安全
表单项中的数据要想被提交：必须指定其name属性

表单项标签

**1、input：**可以通过type属性值，改变元素展示的样式
1.1 type属性：
text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio：单选框
注意：
1、要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2、一般会给每个单选框提供value属性，指定其被选中后提交的值
3、checked属性，可以指定默认值
checkbox：复选框
注意：
1、一般会给每个单选框提供value属性，指定其被选中后提交的值
2、checked属性，可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息
按钮：
submit：：提交按钮，可以提交表单
button：普通按钮
image：图片提交按钮（src属性指定图片的路径）
lable:指定输入项的文字描述信息
注意：
lable的for属性一般会和input的id属性值对应。如果对应了，则点击lable区域，会让input输入框获取焦点
2、select：下拉列表
子元素：option，指定列表项
3、textarea：文本域
cols:指定列数，每一行有多少字字符
rows:默认多少行

CSS

CSS的使用：与html结合方式

1、内联方式（较少使用）：
在标签内使用style属性指定css代码
如

hello css

2、内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码
如

helllo css

3、外部样式
1）定义css资源文件
2）在head标签内，定义link标签，引入外部资源文件
如a.css文件：
div{
color:blue;
}

hello css

3)在head标签内，定义link标签，引入外部资源文件注意： 1、2、3中方式 css作用范围越来越大方式1不常用，后期常用2、3 方式3格式可以写为： ## CSS语法格式：选择器{ 属性名1：属性值1；属性名2：属性值2； ... } 注意：每一对属性需要使用；隔开，最后一对属性可以不加 ## 选择器选择器：筛选具有相似特征的元素分类： 1. 基础选择器 1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法：#id属性值{} 2. 元素选择器：选择具有相同标签名称的元素 * 语法：标签名称{} * 注意：id选择器优先级高于元素选择器 3. 类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{} * 注意：类选择器选择器优先级高于元素选择器 2. 扩展选择器： 1. 选择所有元素： * 语法： *{} 2. 并集选择器： * 选择器1,选择器2{} 3. 子选择器：筛选选择器1元素下的选择器2元素 * 语法：选择器1 选择器2{} 4. 父选择器：筛选选择器2的父元素选择器1 * 语法：选择器1 > 选择器2{} 5. 属性选择器：选择元素名称，属性名=属性值的元素 * 语法：元素名称[属性名="属性值"]{} 6. 伪类选择器：选择一些元素具有的状态 * 语法：元素:状态{} * 如： * 状态： * link：初始化的状态 * visited：被访问过的状态 * active：正在访问状态 * hover：鼠标悬浮状态

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>

    /* 基础选择器
       #div1{
            color:red;
        }
        div{
            color: blue;
        }
        .cls{
            color: aquamarine;
        }
     */

       /* 扩展选择器
       *{
            color: aqua;

        }
        */
    /*
    div,p{
        color: blue;
    }
    */
   /*
    div p{
        color: aqua;
    }
    */
    /*
        div>p{
            border: 5px solid;
        }
        */
        /*
        input[type="text"]{
            border: 6px solid;
        }
        */
        a:link{
            color: pink;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: blue;
        }
        a:visited{
            color: red;
        }

    </style>
</head>
<body>
<div id="div1">传智播客</div>
<div><p>你好</p></div>
<p>黑马程序员</p>
<div class="cls">java</div>
<input type="text"value="hello"><br>
<a href="#">编辑页面</a>
</body>
</html>

属性

字体、文本
* font-size：字体大小
* color：文本颜色
* text-align：对其方式
* line-height：行高
背景
* background：
边框
* border：设置边框，符合属性
尺寸
* width：宽度
* height：高度
盒子模型：控制布局
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
* left
* right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<form action="#" method="get">
    <label for="username">用户名</label>:
    <input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="sex" value="male" checked>男
    <input type="radio" name="sex" value="female">女
    <br>
    爱好：<input type="checkbox" name="hobby" value="shopping">逛街<br>
    <input type="checkbox" name="hobby" value="java">java<br>
    <input type="checkbox" name="hobby" value="game">游戏<br>
    <input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id" value="qqq"><br>
    取色器：<input type="color" name="color"><br>
    生日：<input type="date"><br>
    生日：<input type="datetime-local"><br>
    邮箱：<input type="email"name="email"><br>
    年龄：<input type="number" name="age">
    省份：<select name="province">
    <option value="">--请选择--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广东</option>
    </select><br>
    自我描述：<textarea cols="20" rows="5"></textarea><br>
    <input type="submit"value="登录"><br>
    <input type="button" value="登录2">
</form>


</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS属性</title>
    <style>
   /*     p{
            color: blue;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            border: 1px solid red;!*边框*!
        }
        div{
            border: 1px solid blue;
            height: 200px;!*尺寸*!
            width: 200px;
            background: url("../HtmlDemo/me.jpg");
        }*/
        div{
            border: 1px solid red;

        }
        .div1{
            width: 100px;
            height: 100px;
           /* margin: 50px;外边距*/
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;/*内边距*/
            box-sizing: border-box;
        }
        .div3{
            float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float: right;
        }



    </style>
</head>
<body>
<!--<p>传智播客</p>
<div>黑马程序员</div>-->
<div class="div2">
    <div class="div1">qqq</div>
</div>
<div class="div3">aaa</div>
<div class="div4">sss</div>
<div class="div5">ddd</div>
</body>
</html>

练习

1、无CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<form>
    <table border="1" align="center" width="500">
        <tr>
            <td><label for="username">用户名</label> </td>
            <td><input type="text"name="username" id="username"></td>
        </tr>
        <tr>
            <td><label for="password">密码</label> </td>
            <td><input type="password"name="password" id="password"></td>
        </tr>
        <tr>
            <td><label for="email">Email</label> </td>
            <td><input type="email"name="email" id="email"></td>
        </tr>
        <tr>
            <td><label for="name">姓名</label> </td>
            <td><input type="text"name="name" id="name"></td>
        </tr>
        <tr>
            <td><label for="number">手机号</label> </td>
            <td><input type="number"name="number" id="number"></td>
        </tr>
        <tr>
            <td><label for="username">性别</label> </td>
            <td><input type="radio"name="sex" id="male">男
                <input type="radio" name="sex" id="female">女</td>
        </tr>
        <tr>
            <td><label for="birthday">出生日期</label> </td>
            <td><input type="date"name="birthday" id="birthday"></td>
        </tr>
        <tr>
            <td><label for="code">验证码</label> </td>
            <td><input type="text"name="code" id="code">
            <img src="FormDemo01.html"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value ="注册">
        </tr>
    </table>
</form>
</body>
</html>

2、有CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("../HtmlDemo/me.jpg");
            padding-top: 25px;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid cadetblue ;
            background: white;
            margin: auto;
        }
        .rg_left{
            float: left;
            margin: 15px;
        }
        .rg_left>p:first-child{
            color: yellow;
            font-size: 15px;
        }
        .rg_left>p:last-child{
            color: gray;
            font-size: 20px;
        }
        .rg_center{
            float: left;

        }
        .rg_right{
            float: right;
            margin: 15px;
        }
        .rg_right>p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{
            width: 100px;
            text-align: left;
            height: 45px;
        }
        .td_right{
            padding-left: 45px;
        }
        #name,#email，#number，#password，#birthday{
            width: 251px;
            height: 32px;
            border: 1px solid cornflowerblue;
            border-radius: 5px;
            padding-left: 10px;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: yellow;
            border:1px solid yellow;
        }
    </style>

</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>

<div class="rg_center">
    <div class="rg_form">
        <!--定义表单form-->
        <form>
            <table border="1" align="center" width="500">
                <tr>
                    <td class="td_left"><label for="username">用户名</label> </td>
                    <td class="td_right"><input type="text"name="username" id="username" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td><label for="password">密码</label> </td>
                    <td><input type="password"name="password" id="password"></td>
                </tr>
                <tr>
                    <td><label for="email">Email</label> </td>
                    <td><input type="email"name="email" id="email"></td>
                </tr>
                <tr>
                    <td><label for="name">姓名</label> </td>
                    <td><input type="text"name="name" id="name"></td>
                </tr>
                <tr>
                    <td><label for="number">手机号</label> </td>
                    <td><input type="number"name="number" id="number"></td>
                </tr>
                <tr>
                    <td><label for="username">性别</label> </td>
                    <td><input type="radio"name="sex" id="male">男
                        <input type="radio" name="sex" id="female">女</td>
                </tr>
                <tr>
                    <td><label for="birthday">出生日期</label> </td>
                    <td><input type="date"name="birthday" id="birthday"></td>
                </tr>
                <tr>
                    <td><label for="code">验证码</label> </td>
                    <td><input type="text"name="code" id="code">
                        <img src="FormDemo01.html"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value ="注册" id="btn_sub">
                </tr>
            </table>
        </form>
    </div>
</div>
    <div CLASS="rg_right">
        <p>已有账号？<a href="#">立即登录</a></p>

    </div>

</div>
</body>
</html>