form表单
form
标签是用于指定表单数据的提交方式和地址。它有以下几个属性：
1: name
：用于指定表单的名称，方便后续提交使用
2: id
：表单的唯一名称，一般用于提交或样式设置
3: action
：用于定义表单数据的提交地址
4:method
：用于指定表单数据的提交方式，有以下几个常用值
5: get
：以
get
方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数
据不能超过
4K
大小
6: post
：以
post
方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏
中显示，理论上这种方式提交没有大小的限制
7: put
：用于修改数据，这种方式是
RestFul
风格的，后续在某些项目中会用到，一般现在可以
不用考虑
8: delete
：用于删除数据，这种方式是
RestFul
风格的，后续在某些项目中会用到，一般现在可
以不用考虑
9: enctype
：用于指定表单提交的数据类型，有以下两个值：
multipart/form-data
：以二进制流的方式进行提交，一般用于文件上传
appplication/x-www-form-urlencoded
：以文本的方式进行提交，常用方式，默认值
一
文本输入框
文本输入框是使用
input
标签来指定，根据它的
type
属性来指定是什么样的类型的输入框。
它的属性说明如下：
name
：用于表单提交是把数据提交到后端
id
：给这个输入框一个唯一值
value
：它代表是这个输入框所输入的值
size
：用于指定这个输入框的长度
maxlength
：用于指定这个输入框所能输入值的最大的长度
placeholder
：用于指定在输入框中没有值是的提示信息
input标签
1.单行文本框 type="text"
2.密码框
type="password"
3.
单选按钮 type="radio"
4.多选按钮 type="checkbox"
5. 提交按钮 type="submit"
6.复位按钮 type="reset"
7.按钮 type="button"
8.图像按钮 type="image"
9.隐藏域 type="hidden"(
隐藏起来，一般用户看不见,
在页面中不显示)
10.文本域 type="file"
<!DOCTYPE html>
<html lang="en">
<head>
<title>文本输入框</title>
</head>
<body>
<form name="form1" id="form1" action="http://www.baidu.com" method="get">
<input type="text" name="username" value="" placeholder="请输入用户名" size="10" maxlength="5">
<input type="password" name="password" placeholder="请输入密码" size="5" maxlength="5">
<input type="radio" id="" name="radio" value="单选按钮1">单选按钮1
<input type="checkbox" id="" name="" value="多选按钮2">多选按钮2
<input type="checkbox" id="" name="" value="多选按钮3">多选按钮3
<input type="checkbox" id="" name="" value="多选按钮4">多选按钮4
<input type="submit" name="" id="" value="提交按钮">
<input type="reset" name="" id="" value="复位按钮">
<input type="button" name="" id="" value="按钮">
<input type="image" name="" id="" value="图像按钮">
<input type="hidden" name="" id="" value="隐藏域">
<input type="file" name="" id="" value="文本域">
</form>
</body>
</html>
重要元素*
readonly ：规定输入字段为
只读
，
只读
字段是不能修改的
disabled ：使用后
input
元素既不可用
,
也不可点击
<!DOCTYPE html>
<html lang="en">
<head>
<title>form表单</title>
</head>
<body align="center">
<h1> <b> 用户注册</b></h1>
<p> 用户名：
<input type="text" id="" name="name" value="zhangsan" readonly>
<input type="text" id="" name="name" value="zhangsan" disabled>
</p>
</body>
</html>required：在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中会弹出提示文字。
<!DOCTYPE html>
<html lang="en">
<head>
<title>form表单</title>
</head>
<body align="center">
<p>
请留下您的建议或意见：
<textarea name="comment" id="" cols="30" rows="10" required
placeholder="您的建议或意见 "></textarea>
</p>
</div>
</body>
</html>autofocus：当页面打开时，该控件自动获得光标焦点
<!DOCTYPE html>
<html lang="en">
<head>
<title>form表单</title>
</head>
<body align="center">
密码：
<input type="password" id="" name="password" value="" autofocus>
</p>
</body>
</html>
checke ：元素是否被选中
<!DOCTYPE html>
<html lang="en">
<head>
<title>form表单</title>
</head>
<body align="center">
<p>
请选择您的性别：
<input type="radio" id="" name="" value="男" checked>男
<input type="radio" id="" name="" value="女">女
</p>
</body>
</html>
select标签
select
表单的下拉选择框
option ：下拉框中的选项
value ：
选项的值
name ：
下拉框的名称
selected ：默认被选中的选
项
<!DOCTYPE html>
<html lang="en">
<head>
<title>form表单</title>
</head>
<body align="center">
您的收货地址是：
<select name="" id="" size="4">
<option value="请选择您的收货地址">请选择您的收货地址</option>
<option value="永川" selected>永川</option>
<option value="江北">江北</option>
<option value="万州">万州</option>
</select>
</body>
</html>multiple ：以列表形式显示
<!DOCTYPE html>
<html lang="en">
<head>
<title>form表单</title>
</head>
<body align="center">
<p>
请选择您的爱好:
<input type="checkbox" id="" name="" value="足球">足球
<input type="checkbox" id="" name="" value="篮球" checked>篮球
<input type="checkbox" id="" name="" value="LOL">LOL
<input type="checkbox" id="" name="" value="韩剧">韩剧
<input type="checkbox" id="" name="" value="王者荣耀">王者荣耀
</p>
</body>
</html>
textarea标签
textarea ：表示也是表单标签的
cols：
以字符个数设定的多行文本框的宽度
rows ：以字符个数设定的多行文本框的高度
name ：多行文本框的名称
<!DOCTYPE html>
<html lang="en">
<head>
<title>form表单</title>
</head>
<body align="center">
<p>
请留下您的建议或意见：
<textarea name="comment" id="" cols="30" rows="10" required
placeholder="您的建议或意见 "></textarea>
</p>
</body>
</html>table表格
包括的标签有
table
、
thead
、 tbody、
tfoot
、
tr
、
td
thead
元素定义头
tfoot
元素定义尾
tbody
元素则定义主干
tr>
标签用于定义一行
td>
标签用于定义一列 (
td
也叫做单元格，必须放在
tr
中)
<!DOCTYPE html>
<html lang="en">
<head>
<title>表格布局</title>
</head>
<body>
<table>
<thade>
<tr>
<td></td>
</tr>
</thade>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
border="n"
，
n
是一个数字，单位是像素， 当
n = 0
时表示表格没有边框，当
n >0
时表示表格有
边 框，边框的宽度是
n
像素，注意
n
必须为整数
<!DOCTYPE html>
<html lang="en">
<head>
<title>边框</title>
</head>
<body>
<table border=""></table>>
<tr>
<td> </td>
</table>
</body>
</html>
width
属性表示表格的宽度，
height
属性表示表格的高度
<!DOCTYPE html>
<html lang="en">
<head>
<title>高度和宽度</title>
</head>
<body>
<table width="" height="" ></table>>
<tr>
<td> </td>
</table>
</body>
</html>align属性表示表格的对齐方式，主要用left、center、right
<!DOCTYPE html>
<html lang="en">
<head>
<title>对齐方式</title>
</head>
<body>
<table align="left"></table>>
<tr>
<td> </td>
</table>
</body>
</html>bgcolor 属性表示表格的背景颜色，Background 属性表示表格的背景图像
<!DOCTYPE html>
<html lang="en">
<head>
<title>表格背景</title>
</head>
<body>
<table bgcolor="" background=""></table>>
<tr>
<td> </td>
</table>
</body>
</html>cellpadding 表示表格的边距，cellspacing 表示表格的间距。默认值是 2px（边距是指单元格内的元素距离单元格边缘的距离，间距是指单元格与单元格之间的距离)
<!DOCTYPE html>
<html lang="en">
<head>
<title>表格填充和边距</title>
</head>
<body>
<table cellpadding="" cellspacing=""></table>>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>表格tr和td的宽度,高度和背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>表格的宽度和高度</title>
</head>
<body>
<table></table>>
<tr width="10" height="20">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>表格的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<title>表格的嵌套</title>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<tr> </tr>
<tr> </tr>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>表格的合并
单元格的跨列和跨行
colspan="n" 中 n 是一个整数，表示这个单元格在水平方向跨的列数
rowspan="n" 中 n 是一个整数，表示这个单元格在垂直方向跨的行数
<!DOCTYPE html>
<html lang="en">
<head>
<title>单元格的跨列和跨行</title>
</head>
<table border="1">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td > </td>
</tr>
</table>
</body>
</html>
扫一扫
3756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
