html表单剩余及css样式学习_html与css在td里取余-CSDN博客

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/123685694

本文介绍如何使用HTML隐藏域hidden隐藏数据并发送，readonly属性锁定用户交互，以及禁用(disabled)按钮功能。同时讲解CSS样式选择器在美化表单中的应用。

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

HTML表单剩余部分

hidden 是隐藏域：需要把数据的名称hideName和值666传给后台，但是不想让用户在页面上看到，只是单纯的想发送一段数据。

readonly 是只读属性，作用是：只是让用户看到，但是并不想让用户修改（即修改不了默认数据）。

disabled 是禁用属性，目的是：把按钮原来功能禁用掉（即无法点击使用）。

<label> 标注标签，自动将焦点转移到与该标注相关的表单元素上（input 的id 的值要和 label 的for 的值保持一致）。

CSS样式

CSS的概念：Cascading Style Sheet 级联样式表。

作用：表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

优势：内容与表现分离网页的表现统一，容易修改、丰富的样式，使得页面布局更加灵活、减少网页的代码量，增加网页的浏览速度，节省网络带宽、运用独立于页面的CSS，有利于网页被搜索引擎收录。

<style> 样式标签 ，在html5 可以省略 type="text/css"。

行内样式：使用style属性引入CSS样式。

内部样式：即CSS代码写在<head>的<style>标签中。

优点：方便在同页面中修改样式。

缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底。

外部样式：<link rel="stylesheet" href=" "> 即导入外部样式表。rel="stylesheet" 使用外部样式表，href 文件的路径。

标签选择器：div是选择器 color是属性 red是值。font-size字体大小改为30像素。

font-weight:bold; 字体加粗。

类选择器： <标签名 class= "类名称"></标签名> 是给加了类名称的元素才会有样式

（类选择器前面记得要加上.）。

id选择器： 表示唯一性，使用id选择器，要使用#号，且#后面名称需要和 id=" "后面的值对应。

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式</title>
    <style>
        #div1{
            color: red;
        }
        .h3{
            color: green;
        }
        li{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <h3 class="h3">三级标题</h3>
        <ul>
            <li>无序列表1</li>
            <li>无序列表2</li>
            <li>无序列表3</li>
        </ul>
    </div>
</body>
</html>

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿里巴巴用户注册</title>
</head>
<body>
    <p>
        <img src="./素材/images/logo.bmp">
    </p>
    <p>
        <a href="#">登录</a>|<a href="#">阿里巴巴首页</a>|<a href="#">客服中心</a>|<img src="./素材/images/icon1.bmp"><a href="#">提建议</a>
    </p>
    <p>
        如果需要帮助，请咨询<img src="./素材/images/icon2.bmp">或拨打400-800-1688
    </p>
    <form>
        <p>
            <label for="email">电子邮箱：</label><input type="email" name="email" id="email" maxlength="32">
        </p>
        <p>
            <label for="name">会员登陆名</label><input type="text" name="name" id="name" maxlength="32">
        </p>
        <p>
            <label for="pass1">密码</label><input type="password" name="pass1" id="pass1" maxlength="32">
        </p>
        <p>
            <label for="pass2">再次输入密码</label><input type="password" name="pass2" id="pass2" maxlength="32">
        </p>
        <p>
            会员身份：
            <input type="radio" name="identity" id="buy" checked><label for="buy">买家</label>
            <input type="radio" name="identity" id="sell"><label for="sell">卖家</label>
            <input type="radio" name="identity" id="two"><label for="two">两者都是</label>
        </p>
        <p>
            <label for="verification">验证码：</label><input type="text" name="verification" id="verification" maxlength="5"><img src="./素材/images/verycode.gif"><a href="#">看不清楚？换一张</a>
        </p>
        <p>
            <input type="image" src="./素材/images/btn_reg.gif" alt="">
        </p>
    </form>
    <p>
        <textarea name="clause" id="clause" cols="40" rows="10"></textarea>
    </p>
    <p>
        <img src="./素材/images/footer.jpg">
    </p>
</body>
</html>

总结：程序有许多不足之处，望各位大佬指正。