本文详细介绍了HTML表单的使用方法，包括各种表单元素如文本框、密码框、单选框等，以及表单的提交方式和数据传递机制。同时，文章还讲解了CSS的基础知识，包括内嵌、内部和外部引入方式，以及如何使用CSS进行页面美化。
内容
1 html表单标签(重点)
2 css（了解）
html的表单标签
应用场景
登录 注册等等
作用
只要后期需要将页面用户填写的数据传递给后台，我们都需要使用表单标签
使用
标签格式：表单标签不是由一个组成，而是有多个组成
<form>
1 文本框 <input type="text" />
2 密码框 <input type="password" />
3 单选框 <input type="radio" />
4 复选框 <input type="checkbox" />
5 日期框 <input type="date" />
6 隐藏框 <input type="hidden" />
7 文件框 <input type="file" />
8 下拉框 <select><option>内容</option></select>
9 文本域 <textarea></textarea>
10 提交按钮 <input type="submit" />
11 普通按钮 <input type="button"/>
12 重置按钮 <input type="reset" />
<form>
细节：所有的表单标签都要写在<form></form>里面
<body>
<form>
<input type="hidden" /> <!--隐藏框-->
用户名：<input type="text" /><br/>
密码： <input type="password" /><br/>
性别： <input type="radio" name="sex" /> 男
<input type="radio" name="sex"/> 女<br/>
爱好： <input type="checkbox" name="hobby"/>抽烟
<input type="checkbox" name="hobby"/>喝酒
<input type="checkbox" name="hobby"/>烫头<br/>
日期：<input type="date" /><br/>
上传：<input type="file" /><br/>
籍贯：<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select><br/>
个人介绍：<textarea rows="5" cols="50"></textarea><br/>
<input type="submit" value="提交按钮"/> <!--可以提交整个表单-->
<input type="button" value="普通按钮"/> <!--只和js一起使用-->
<input type="reset" value="清空数据" />
</form>
</body>
form标签的属性
form标签的2个属性：action method
action:指定表单提交到哪里的地址
method：提交方式 get提交 post提交
细节：get提交和post提交的区别
get提交方式会将整个表单提交的内容都显示在地址栏上(默认不写就为get)
post提交方式不会将整个表单提交的内容显示在地址栏上
所有标签的核心属性
name属性：表单提交数据是以key=value的形式进行提交的 name属性就是用来设置key名的
细节：表单数据要想提交 必须得有name属性
value属性：用来设置value值的 一般只给单选框 复选框设置 其余标签会将用户填写的内容当成是value属性值
细节：按钮的value属性是用来设置按钮名称的
单选框/复选框特有的属性
checked="checked" 被选中
下拉框特有的属性
selected="selected" 被选中
<body>
<!-- 核心点：
form标签的属性：action method
action:指定当submit提交按钮被点击，要将表单提交到那个地方去 （后期都是提交给java代码了）
method: 指定提交方式 get（提交默认） post提交
问：get提交和post提交的区别：
get提交会将所有用户填写内容放在浏览器的地址栏中进行传递（key=value） 不安全
post提交不会将所有用户填写内容放在浏览器的地址栏中进行传递 安全
所有标签的核心属性：name value (才能做后期的页面数据传递)
后期是需要将表单里用户填写的数据进行提交的，但是如果表单中没有name属性，表单里面的数据是不会提交的
name: 设置name名称 传递的过程中name名称会被当成key
value:设置value值 传递的过程中value属性值会被当成value
可以将用户输入的内容当成是value值 也可以自己手动设置value (单选框/复选框)
按钮的value值只是用来设置按钮的名称
单选框和复选框特有的属性：
checked="checked" 默认被选中
下拉框特有的属性：
selected="selected"
-->
<form action="demo.html">
<input type="hidden" /> <!--隐藏框-->
用户名：<input type="text" name="username" /><br/>
密码： <input type="password" name="password"/><br/>
性别： <input type="radio" name="sex" value="男"/> 男
<input type="radio" name="sex" value="女" checked="checked"/>女 <br/>
爱好： <input type="checkbox" name="hobby" value="抽烟"/>抽烟
<input type="checkbox" name="hobby" value="喝酒" checked="checked"/>喝酒
<input type="checkbox" name="hobby" value="烫头" checked="checked"/>烫头<br/>
日期：<input type="date" name="date"/><br/>
上传：<input type="file" name="upload"/><br/>
籍贯：<select name="city">
<option value="01">北京</option>
<option value="02">上海</option>
<option value="03" selected="selected">广州</option>
<option value="04">深圳</option>
</select><br/>
个人介绍：<textarea rows="5" cols="50" name="info"></textarea><br/>
<input type="submit" value="提交按钮"/> <!--可以提交整个表单-->
<input type="button" value="普通按钮"/> <!--只和js一起使用-->
<input type="reset" value="清空数据" />
</form>
</body>
css（了解）
概述
CSS：Cascading Style Sheets ----层叠样式表 专门用于网页的美化
css的美化初体验:有三个font标签 需要设置字体大小为70 颜色为红色
结论：比HTML美化的功能更加强大，可以实现HTML不能实现的美化效果
CSS使用
1.css的代码三种引入方式
内嵌方式（行内方式） 内部方式 外部方式
内嵌方式（行内方式）
需要在每个标签内部加上style属性
属性的值：key1:value1;key2:value2...
内部方式
需要在<head></head>之间定义标签<style>
标签名{
key1:value1;
key2:value2;
}
细节：css的注释: /* 注释内容 */
外部方式 条件：需要引入外部的文件
在外部创建一个css样式文件写样式
在需要的页面将css文件引入 <link rel="stylesheet" href="文件地址">
外部方式可以用于多个页面
外部了解方式：<style type="text/css">
@import url("css文件地址");
</style>
细节：三种引入方式的优先级：就近原则 谁离标签近谁的优先级高
css的选择器（掌握）
作用：用来获取页面的标签的
条件：只能使用内部样式和外部样式来控制选择器
1 基本选择器
元素选择器:可以用来设置所有标签 根据标签名直接获取标签
类选择器:可以用来设置一组标签的 需要在标签上设定class属性根据class属性名获取标签
ID选择器:可以用来设置单个标签 需要在标签上设定ID属性根据id属性名获取标签
细节：ID选择器>类选择器>标签选择器
2 扩展选择器
并集(组合)选择器 多个选择器的集合 选择器1，选择器2，选择器3{属性}
层级选择器 父元素下所有的子孙元素 元素1>元素2 元素1 元素2（包含子子孙孙）
<div>
<div>
<div></div>
<div>
<div><div>
<div><div>
<div>
属性选择器 只要包含的有属性名就能被选中
伪类选择器 同一个元素在不同的操作状态下呈现不同的样式 例如超链接
元素:link 正常状态
元素:hover 鼠标悬停
元素:active 正在激活
元素:visited 访问过的
css属性介绍
设定背景
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-repeat 设置背景图像是否重复及如何重复
设定文本
color 设置文本颜色
text-align 对齐元素中的文本
text-indent 缩进元素中文本的首行
text-decoration 去除超链接的下划线
line-height 设置行高
设定字体
font-size 设置字体的尺寸
font-family 设置字体属性（楷体）
font-style 设置字体风格（斜体）
font-weight 设置字体的粗细
元素的显示和隐藏属性
display
取值：
none 设置元素不可见
inline 设置元素为内联元素
block 设置元素为块级元素
css的浮动
作用：可以让div在一行
属性：float 取值：left right
clear清除浮动
left:清除自身的左浮动
right:清除自身的右浮动
both:不管左浮动还是右浮动都清除自身
盒子模型
css认为所有元素就是一个盒子
盒子组成：内容 边框 内边距 外边距
外边距 ：margin 盒子和盒子或盒子和页面之间的距离
取值：left right top bottom
内边距 : padding 盒子中的内容和盒子边框之间的距离
取值：left right top bottom
标准盒子(默认)：内容不变，盒子变化
属性控制（默认）：box-sizing:content-box
怪异盒子：盒子不变 内容变化
属性控制：box-sizing:border-box
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background-image: url("img/register_bg.png");
}
#regist{
border: 8px solid #EEEEEE;
background-color: white;
width: 800px;
height: 500px;
margin-left: 200px;
margin-top: 30px;
}
#regist>div{
float: left;
height: 500px;
}
#left{
width: 200px;
}
#center{
width: 400px;
}
#right{
width: 194px;
}
#d1{
margin-left: 20px;
margin-top: 20px;
}
#d1>div:first-child{
font-size: 17px;
color: #FFDC68;
}
#d1>div:last-child{
font-size: 17px;
color: #A6A7A8;
}
#d3{
font-size: 14px;
margin-top: 15px;
margin-left: 65px;
}
a{
text-decoration: none;
}
.td_left{
width: 100px;
text-align: right;
font-size: 15px;
}
.td_right{
padding-left: 22px;
box-sizing: border-box;
}
#username,#password,#email,#name,#telephone,#yzm,#date{
width: 220px;
height: 20px;
border: 2px solid gainsboro;
border-radius: 5px;
}
#img{
padding-left: 130px;
padding-top: 5px;
box-sizing: border-box;
}
#yzm{
width: 100px;
}
#tpyzm{
width: 100px;
/*垂直居中*/
vertical-align: middle;
}
#table{
line-height: 40px;
}
#d2{
margin-top: 50px;
}
</style>
</head>
<body>
<div id="regist">
<div id="left">
<div id="d1">
<div>新用户注册</div>
<div>USER REGISTER</div>
</div>
</div>
<div id="center">
<div id="d2">
<form method="get" action="#">
<table width="100%" id="table">
<tr>
<td class="td_left">用户名</td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名"/>
</td>
</tr>
<tr>
<td class="td_left">密码</td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td class="td_left">Email</td>
<td class="td_right">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="td_left">姓名</td>
<td class="td_right">
<input type="text" name="name" id="name"/>
</td>
</tr>
<tr>
<td class="td_left">手机号</td>
<td class="td_right">
<input type="text" name="telephone" id="telephone"/>
</td>
</tr>
<tr>
<td class="td_left">性别</td>
<td class="td_right">
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td class="td_left">出生日期</td>
<td class="td_right">
<input type="date" name="date" id="date"/>
</td>
</tr>
<tr>
<td class="td_left">验证码</td>
<td class="td_right">
<input type="text" name="yzm" id="yzm"/>
<img src="img/verify_code.jpg" id="tpyzm" />
</td>
</tr>
<tr>
<td colspan="2" >
<img src="img/regbtn.jpg" id="img"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="right">
<div id="d3">
<div>已有账号? <a href="#">立即登录</a> </div>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
