fed
fed copied to clipboard
Published
20 hours ago •
BestACE
BestACE
【资源帖】表单标签的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单学习</title>
<style type="text/css">
form {
width: 300px;
height: 300px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 1px solid #000;
}
form div {
margin: 20px 0px;
}
form label {
display: inline-block;
width: 88px;
text-align: right;
}
form input[type="submit"] {
margin-left: 114px;
}
form input[type="date"] {
/* inline-block */
width: 168px;
}
</style>
</head>
<body>
<form action="" method="post">
<div>
<label for="username">用户名：</label><input type="text" name="username" id="username" value="" />
</div>
<div>
<label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" value="" />
</div>
<div>
<label for="birthday">出生年月：</label><input type="date" name="birthday" id="birthday" value="" />
</div>
<div>
<label for="birthday">出生年月：</label><input type="range" name="birthday" id="birthday" value="" />
</div>
<div>
<input type="submit" value="注册" />
</div>
</form>
<!--
form 标签 包含网页中的表单，表单的容器
action 制定用哪个文件来处理表单
method 处理表单的方法
input 默认的显示方式display是 inline-block
label 默认的显示方式display是 inline
block 要求单独占一行
inline 不要求单独占一行，没有宽和高
inline-block 不要求单独占一行，有宽和高
块元素水平居中
设置固定宽度
水平方向的margin为auto
块元素的水平垂直居中(方法之一)
margin设置为auto
绝对定位
left right top bottom 四个值设置为0
input type
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox 定义复选框。
file 定义输入字段和 "浏览..." 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
submit 定义提交按钮。提交按钮向服务器发送数据。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
html5新增的type属性，浏览器的兼容性不能保证（caniuse.com查看兼容性）
url 定义用于 URL 的文本字段。
tel 定义用于电话号码的文本字段。
search 定义用于搜索的文本字段。
range 定义带有 slider 控件的数字字段。
number 定义带有 spinner 控件的数字字段
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
-->
</body>
</html>
