<input type="">:type的取值可为text（文本输入框）、password（密码输入框）,button（普通按钮）、submit（提交按钮）、reset（重置按钮）、radio（单选）、checkbox（复选框·）、file（文件选择框）…<input type="">:type的取值还可为email（邮箱）、url（链接）、number（数字），如果格式不符合，会提示错误- form必须有action属性，表示表单数据的提交地址
- 所有需要提交的数据，input必须有name属性
- input按钮的文字，使用value属性表示
- input必须放在form标签内才能提交
<form method=""></form>:method可以取值为get（获取数据）和post（提交数据）- get请求与post请求的区别：
1.get请求通常表示获取数据，post请求通常表示提交数据
2.get请求发送的数据都写在地址栏上，用户可见；post请求发送的数据用户不可见
3.get请求不能提交大量的数据，但post可以，因此不要混用
（提交，按“F12”，再重新提交表单，点第一个网址，右侧就会有提交的隐蔽数据）
例子一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<table width="600px" border="1px" cellspacing="0">
<tbody>
<tr height="40px">
<td rowspan="4" align="center">整体信息</td>
<td colspan="2"></td>
</tr>
<tr height="40px">
<td align="right">用户名：</td>
<td>
<input type="text" name="loginname">
</td>
</tr>
<tr height="40px">
<td align="right">密码：</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
<tr height="40px">
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
例子二：智能表单
代码中涉及的知识点拓展
<!DOCTYPE>
<head>
<title>定位</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
form{
width: 350px;
background: #9CBC2B;
margin: 20px auto;
padding: 0 15px;
color: #364411;
border-radius: 5px;
}
.step{
font-size: 14px;
font-weight: bold;
margin: 10px 0;
}
.form-line{
border-radius: 5px;
border-color: #F0F5DF;
border-width: 2px;
border-style: solid;
padding: 3px;
margin: 3px 0;
background-color: #CEDE95;
font-size: 12px;
padding-left: 10px;
}
.form-line span{
display: inline-block;
width: 110px;
}
.form-line input{
background: white;
border: none;
height: 20px;
border-radius: 3px;
width: 180px;
/*去掉光圈，也就是围着框框的亮圈，textarea也可设置*/
outline: none;
}
.form-line input[type=radio]{
width: 25px;
height: 12px;
}
.form-line textarea{
width: 180px;
height: 70px;
vertical-align: top;
border: none;
border-radius: 3px;
/*none:不可改变大小，vertical：垂直方向可改变大小，horizontal：水平方向可resize*/
resize: none;
}
input.sumit-btn{
border: none;
background-color: #374313;
color: white;
display: block;
width: 100px;
padding: 5px;
border-radius: 20px;
margin: 10px auto;
/*鼠标放置到该处变成小手的形状*/
/*cursor表示光标，pointer表示指针*/
cursor: pointer;
}
</style>
</head>
<body>
<form action="http://www.baidu.com">
<section>
<p class="step">第一步：详细信息</p>
<p class="form-line">
<span>姓名</span>
<input type="text" placeholder="请输入姓名" name="name">
</p>
<p class="form-line">
<span>电话</span>
<input type="text" placeholder="13245388456" name="phone">
</p>
<p class="form-line">
<span>微信主页</span>
<input type="url" name="url">
</p>
</section>
<section>
<p class="step">第二步:收货地址</p>
<p class="form-line">
<span>详细地址</span>
<textarea placeholder="请输入详细地址" name="address"></textarea>
</p>
<p class="form-line">
<span>邮编</span>
<input type="text" name="number">
</p>
</section>
<section>
<p>第三步：银行卡信息</p>
<p class="form-line">
<span>银行卡类型</span>
<input type="radio" name="cardType" name="card">借记卡
<input type="radio" name="cardType" name="card">信用卡
<input type="radio" name="cardType" name="card">VISA卡
</p>
<p class="form-line">
<span>卡号</span>
<input type="number" name="cardnumber">
</p>
<p class="form-line">
<span>密码</span>
<input type="number" placeholder="请输入密码" name="id">
</p>
<p class="form-line">
<span>持卡人</span>
<input type="text" name="people" >
</p>
</section>
<p>
<input type="submit" class="sumit-btn" value="提交">
</p>
</form>
</body>
</html>
扫一扫
1771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
