HTML表单标签+CSS入门

最新推荐文章于 2023-02-24 10:30:41 发布

戈薇12345

最新推荐文章于 2023-02-24 10:30:41 发布

阅读量229

点赞数 1

分类专栏： web 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_36450449/article/details/119987014

版权

web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1.HTML表单标签

HTML:
   表单标签：采集用户输入的数据，完成用户与服务器进行交互的操作
       <form> 定义一个 HTML 表单，用于用户输入。
           属性：
           action： URL 规定当提交表单时向何处发送表单数据。 #表示给本机发送数据
           method ：规定用于发送表单数据的 HTTP 方法。
               get:
                   1.会在浏览器上方显示出发送的信息（地址栏）
                   2.请求的参数大小是有限制的
                   3.不太安全
               post:
                   1.会在f12的开发者工具中显示发送的信息
                   2.请求的参数大小是没有限制的
                   3.比较安全

           表单里面的属性要是想提交，就不需要写name值
       <input> :定义一个输入控件（很麻烦的标签，type很多）输入字段可通过多种方式改变，取决于 type 属性。

               type属性：type 属性规定要显示的 <input> 元素的类型。输入字段可通过多种方式改变，取决于 type 属性。
                   1.text：文本框，也是默认值
                       placeholder：指定输入框的提示信息。当鼠标点击时，会自动清空提示信息
                   2.password：把输入的东西变成看不见的状态了
                   3.radio：单选，
                       1.需要多选一中的name必须得是相同的；
                       2.地址栏中gender = value，可以给不同的选项的value不一样
                       3.checked可以默认一个值
                   4.checkbox：复选框
                       1.地址栏中gender = value，可以给不同的选项的value不一样
                       2.checked可以默认一个值
                   5.file ：文件选择框
                   6.hidden：隐藏域用于提交隐藏信息

                   按钮：
                       submit：提交表单
                       button：就是一个按钮
                       img：图片提交按钮，指定src路径可以选择图片，然后点击图片就是提交表单


                   color :取色器
                   date
                   datetime-local
                   email
                   number
               label:指定输入项的文字信息描述
                   label的for属性会和input的id对应。如果对应了，点文字也能跳到text

       <select> 定义选择列表（下拉列表）。
           option：指定列表项
           selected:默认选中
       <textarea> 定义多行的文本输入控件。 (文本域)
           rolws：行数
           cols：列数

2.CSS基础入门

CSS:页面美化和布局
   概念(Cascading Style Sheets):层叠样式表
       层叠：多个样式可以作用在同一个html元素上，同时生效
   好处：
       功能强大
       解耦
   CSS与HTML结合的使用：
       1.内联样式：标签内使用style属性指定css代码
           <div style="color: red">hello css</div>
       2.内部样式：在<head>标签内定义一个style，作用范围在本文件内
           <div >hello css</div>
                <style>
                   div{
                       color: aqua ;
                   }
               </style>
       3.外部样式：在外部抽取一个css文件，加载到本类文件中直接使用
           1.外部写一个css文件
           2.在<head>使用link标签导入

       4.格式
           选择器{
               属性名1，属性值1；
               属性名2，属性值2；
               ...
           }

       5.选择器
           基础选择器：
               1.id选择器
                   语法：#id{}
               2.元素选择器
                   语法：元素{}
               3.类选择器
                   .class{}
           扩展选择器：
               1.选择所有元素：
                   *{}
               2.并集选择器
                   元素1，元素2{}
               3.子选择器：筛选选择器1下的选择器2
                   选择器1 选择器2{}
               4.父选择器：筛选选择器2上的选择器1
                   选择器1 >选择器2{}
               5.属性选择器：选择元素名称中，属性名=属性值的元素
                   元素[属性名 = 属性值]{}
               6.伪选择器：选择一些元素具有的状态
                   元素：状态{}
                   例如：<a>
                           link:初始化的状态
                           visited:被访问过的状态
                           active:正在访问的状态
                           hover:鼠标悬浮状态
       6.属性
           1.文本，字体
               font-size：字体大小
               color：文本颜色
               height：文本高度（加了边框就能看见了）
               text-align：文本对齐方式
           2.尺寸
               width：宽度
               height：高度
           3.背景
               background: url("./img/logo.jpg") no-repeat center;
               背景：背景的路径，不重复，居中
           4.边框
               border: 3px solid red;
               边框：3px线宽，实线，红色；
           5.盒子模型
               外边距(Margin)：
               内边距(Padding)：
                   默认情况下内边距会影响整个盒子的大小
                   box-sizing: border-box;可以设置盒子的大小为最终的尺寸
               浮动（Float）：

3.练习

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
            height: 600px;
            width: 100%;
        }
        .layout{
            width: 850px;
            height: 650px;
            border: 8px solid #EEEEEE;
            margin: auto;

            background: white;
        }
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin-left: 15px;
            margin-top: 15px;
        }
        .rg_left_1{
            color: gold;
            font-size: 20px;
        }
        .rg_left_2{
            color: #EEEEEE;
            font-size: 20px;
        }


        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            margin-left: 50px;
            margin-top: 50px;
        }
        .td_left{
            text-align: right;
            width: 80px;
            height: 50px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#name,#tel,#email,#birthday{
            height: 30px;
            width: 200px;
            border-radius: 5px;
        }
        #checkcode_1{
            height: 30px;
            width: 90px;
            border-radius: 5px;
        }
        #checkcode_2{
            height: 25px;
            width: 100px;
            padding-left: 5px;
            border-radius: 5px;
        }
        #btn{
            width: 90px;
            height: 30px;
            border-radius: 3px;
            background: gold;
        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin-right: 15px;
            margin-top: 12px;
        }
        a:link{
            color: red;
        }
        a:hover{
            color: gold;
        }
        a:active{
            color: blue;
        }
        a:visited{
            color: gray;
        }
    </style>
</head>
<body>
    <div class="layout" >
        <div class="rg_left">
            <p class="rg_left_1">新用户注册</p>
            <p class="rg_left_2">UER REGISTER</p>
        </div>
        <div class="rg_center">
            <form>
                <table>
                    <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 class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name = "password" id="password" placeholder="请输入密码"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name = "email" id="email" placeholder="请输入邮箱"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name = "name" id="name" placeholder="请输入真实姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name = "tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label >性别</label></td>
                        <td class="td_right">
                            <input type="radio" name = "gender"   value="male" checked> 男
                            <input type="radio" name = "gender"   value="female"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name = "birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label >验证码</label></td>
                        <td class="td_right">
                            <input type="text" name = "checkcode" id="checkcode_1" placeholder="请输入验证码" >
                            <input type="image" src="img/verify_code.jpg" id="checkcode_2">
                        </td>
                    </tr>
                    <tr align="center">
                        <td colspan="2">
                            <input type="submit" value="注册" id="btn">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_right">
            <p>已有帐号？<a href="#" >立即登录</a></p>
        </div>
    </div>

</body>
</html>

戈薇12345

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML表单标签+CSS入门

1.HTML表单标签HTML: 表单标签：采集用户输入的数据，完成用户与服务器进行交互的操作 <form> 定义一个 HTML 表单，用于用户输入。属性： action： URL 规定当提交表单时向何处发送表单数据。 #表示给本机发送数据 method ：规定用于发送表单数据的 HTTP 方法。 get: 1.会在浏览器上方...
复制链接

扫一扫