表单是可以通过网络接收其他用户数据的平台,例如注册页面的账户密码输入、网上订货页等,都是以表单的形式来收集用户信息,并将这些信息传递给后台服务器,实现网页与用户间的沟通对话
思维导图
表单的构成
一个表单中又三个部分组成,
(1)表单标签:包含处理表单数据使用的服务器程序url以及数据提交到服务器的方法。
(2)表单控件:包含文本框、密码框、隐藏框、复选框、单选按钮、下拉以及文件上传等
(3)单表按钮:包含提交、重置和普通按钮。
创建表单
<form></form>标签用来创建表单。
<form action="url地址" method="get | post" name="表单名称"> 各种表单控件 </form>
action属性
action属性用于指定接收并处理表单数据的服务器程序的url地址。
method属性
method属性用于设置表单数据的提交方式,其取值为get或post。
name属性
name属性用于指定表单的名称,以区分同一个页面中的多个表单。
表单控件
大致可分为input控件、textarea控件、select控件三大类。
input控件
<input />元素是表单中最常见的元素,网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。
<input type="..." name="..." value="..."/>
其中,type属性用来说明提供的用户进行信息输入类型,如文本,密码,单选等
属性值 | 说明 |
text | 文本框 |
password | 密码框 |
radio | 单选按钮框 |
checkbox | 复选按钮框 |
submit | 提交框 |
reset | 重置效果框 |
button | 使用普通框 |
file | 插入文件框 |
image | 图像形式提交框 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="" method="" name="myform">
用户名:<input type="text" name="username" value="罗非鱼" size="20" maxlength="4"/>
<br /><br />
密码:<input type="password" name="password"/>
<br /><br />
性别:<label><input type="radio" name="gender" value="man"/>男</label>
<input type="radio" name="gender" value="female" id="nv"/><labe for="nv">女</label>
<br /><br />
兴趣:<input type="checkbox" name="interest" value="sing"/>唱歌
<input type="checkbox" name="interest" value="dance"/>跳舞
<input type="checkbox" name="interest" value="敲代码" checked="checked" disabled="disabled"/>敲代码<br /><br />
头像:<input type="file" name="pic"/><br /><br />
城市:<select name="city">
<option value="">请选择城市</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sh">上海</option>
</select><br /><br />
自我介绍:<br />
<textarea rows="8" cols="30"></textarea><br /><br />
<input type="submit" value="提交"/>
<input type="reset" value="重填"/>
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
textarea控件
在表单中如果需要输入大量文字,如评论,特别是包括换行的字时,需要使用到<textarea></textarea>多行文本控件。
<textarea wrap="physical/off/virtual" name="..." clos="..." rows="...">
name属性 | 多行文本框的名称 |
cols属性 | 垂直列。在没有进行样式表设置时,可以表示一行容纳字节数 |
rows属性 | 水平行。可以显示的行数。 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>评论表单</title>
</head>
<body>
评论:<br />
<textarea wrap="physical" name="pl" clos="60" rows="4">
</textarea>
</body>
</html>
罗非鱼好帅是我已经评论的。
select控件
使用<select>可以在浏览器窗口中设置下拉式菜单或者滚动条的菜单,用户可以在菜单中选一个或多个选项。
使用select控件定义下拉菜单的基本语法格式如下:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>select标记</title>
</head>
<body>
出生年:
<select name="birthYear" >
<option value="1998">1998
<option value="1999">1998
<option value="2000" selected>2000
<option value="2001">2001
<option value="2002">2002
<option value="2003">2003
<option value="2004">2004
<option value="2005">2005
</select>
</body>
</html>
常用的属性值。
所学案例
css部分
@charset "utf-8";
/* CSS Document */
body{font-size:18px; font-family:"微软雅黑"; background:url(timg.jpg) no-repeat top center; color:#FFF;}
form,p{ padding:0; margin:0; border:0;} /*重置浏览器的默认样式*/
form{
width:420px;
height:200px;
padding-top:60px;
margin:250px auto; /*使表单在浏览器中居中*/
background:rgba(255,255,255,0.1); /*为表单添加背景颜色*/
border-radius:20px;
border:1px solid rgba(255,255,255,0.3);
}
p{
margin-top:15px;
text-align:center;
}
p span{
width:60px;
display:inline-block;
text-align:right;
}
.num,.pass{
width:165px;
height:18px;
border:1px solid rgba(255,255,255,0.3)
padding:2px 2px 2px 22px;
border-radius:5px;
color:#000;
}
.btn01{
width:165px;
height:25px;
border-radius: 3px;
margin-left:65px;
background:#57b2c9;
color:#fff;
border:none;
}
调用css部分和书写文本和密码部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS控制表单样式</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="#" method="post">
<p>
<span>账号:</span>
<!--(以字母开头,允许5-16字节,允许字母数字下划线)-->
<input type="text" name="username" class="num"
pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />
</p>
<p>
<span>密码:</span>
<!--以字母开头,长度在6~18之间,只能包含字母、数字和下划线-->
<input type="password" name="pwd" class="pass"
pattern="^[a-zA-Z]\w{5,17}$"/>
</p>
<p>
<input type="button" class="btn01" value="登录"/>
</p>
</form>
</body>
</html>