HTML表单与HTML嵌入CSS样式

最新推荐文章于 2024-05-23 20:09:14 发布

喜欢你笑⠀

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量898

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/xh7531/article/details/122414457

版权

一、HTML 表单

在我们日常上网是，经常会遇到登录是要填写账号密码等个人信息时，这就用到了HTML表单。

HTML表单包含了输入框、复选框、单选按钮、提交按钮等等不同的表单控件，用户通过表单中的元素，来完成表单，最后提交之后端程序，进行相应处理。

其中有两个属性 action 和 method 。

action 属性用来指明将表单提交到哪个页面；
method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：
1. GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。
2. POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

控件/标签	描述
<input>	定义输入框
<textarea>	定义文本域（一个可以输入多行文本的控件）
<label>	为表单中的各个控件定义标题
<fieldset>	定义一组相关的表单元素，并使用边框包裹起来
<legend>	定义 <fieldset> 元素的标题
<select>	定义下拉列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个可以点击的按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义表单的密钥对生成器字段
<output>	定义一个计算结果

根据以上标签简单写一个HTML表单：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我眼里只有学习</title>
</head>
<body>
	<h1>注册账号</h1>
    <form action="css/../" method="POST">
		<label>邮&emsp;&emsp;箱： </label><input name="password" type="password"> <br />
        <label>用户名&emsp;： </label><input name="username" type="text"><br />
        <label>密&emsp;&emsp;码： </label><input name="password" type="password"><br />
		<label>确认密码： </label><input name="password" type="password"><br />
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        <br>
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看动漫
        <input type="checkbox" name="hobby" value="3">看书
        <br>
        <label>您的年龄在：</label>
        <input type="radio" name="education" value="1">18-25岁
        <input type="radio" name="education" value="2">26-35岁
        <input type="radio" name="education" value="3">36-45岁
        <input type="radio" name="education" value="4">46-55岁
        <input type="radio" name="education" value="5">55岁以上
        <br>
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>

运行结果如下：

二、 HTML嵌入CSS样式

有四种方法，分别为行内样式（内联样式）、内嵌样式、链接式、导入样式。

行内样式（内联样式）

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>我眼里只有学习</title>
</head>
<body>
    <p style="background-color: #779993">学习</p>
    <h2 style="background-color: #FF6633">学习</h2>
    <p style="background-color: #779993">学习</p>
    <strong style="font-size:30px;">学习</strong>
    <div style="background-color:#6e7fcc; color:#779993; height:30px; line-height:30px;">学习</div>
    <em style="font-size:2em;">学习</em>
</body>
</html>

运行结果如下：

内嵌样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 18px;  /*字体大小 18 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进2个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
    margin-bottom: 20px;  /*段落下边距 20 像素*/
}
</style>
</head>
<body>
    <p>
		CSDN是<b>全球知名中文<font color="red">IT<sup>①</sup></font>技术交流平台</b>,创建于1999年,包含<i>原创博客</i>、
		<i>精品问答</i>、<i>职业培训</i>、<i>技术论坛</i>、<i>资源下载</i>等产品服务,
		<i>提供原创</i>、<i>优质</i>、<i>完整内容</i>的专业IT技术开发社区。
        请<a href="https://www.csdn.net/">点击这里</a>进入官网，与众多博主共同学习。</p>
</body>
</html>

运行结果如下：

链接式

把HTML文件和CSS文件分开存放。减少HTML文件的冗余。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="diyi.css" type="text/css" rel="stylesheet" />
<link href="dier.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <p>学习</p>
    <h3>xuexi</h3>
</body>
</html>

diyi.css 文件代码：

h3{
    font-weight: normal;  /*取消标题默认加粗效果*/
    background-color: #66CC99;  /* 设置背景色 */
    height: 50px;  /*设置标签的高度*/
    line-height:50px;  /* 设置标签的行高 */
}
span{
    color: #FFOOOO;  /* 字体颜色 */
    font-weight:bold;  /* 字体加粗 */
}

dier.css 文件代码：

p{
    color: #FF3333;  /*字体颜色设置*/
    font-weight: bold;  /* 字体加粗 */
    border-bottom: 3px dashed #009933;  /* 设置下边框线 */
    line-height: 30px;  /* 设置行高 */
}

喜欢你笑⠀

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML表单与HTML嵌入CSS样式

一、HTML 表单在我们日常上网是，经常会遇到登录是要填写账号密码等个人信息时，这就用到了HTML表单。HTML表单包含了输入框、复选框、单选按钮、提交按钮等等不同的表单控件，用户通过表单中的元素，来完成表单，最后提交之后端程序，进行相应处理。其中有两个属性 action 和 method 。action 属性用来指明将表单提交到哪个页面； method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下： GET：用户点击提交按钮后，提交的信息会被.
复制链接

扫一扫