概要
表单：
作用：用于收集用户的信息
使用场景：注册、登录、留言、评论、发帖、购物车、搜索等
语法格式：
1.表单定义：
<form action="提交地址" method="提交方式">表单元素</form>
action="提交地址" --- 服务端地址
method="提交方式" --- get/post
get：提交数据会显示在地址栏中，不安全，数据量小
post：提交数据不会显示在地址栏中，相对安全，数据量大
2.表单元素：
input---单行文本输入框
表单input常用属性：
1.type----设置输入框的类型----必写
text----文本输入框
password----密码输入框
radio----单选框----name相同的单选框只能选中一个---默认选中添加checked属性
checkbox----复选框----name相同的复选框可以选中多个---默认选中添加checked属性
submit----提交按钮
button----普通按钮
file----文件上传
2.name----设置输入框的名称---必写
3.value----设置输入框的默认值----选写
4.placeholder----设置输入框的提示信息----选写
select 下拉列表
1.name----设置下拉列表的名称----必写
2.id----设置下拉列表的id----选写
3.option----设置下拉列表的选项----必写
value----设置选项的值----必写
selected----设置默认选中项----选写
textarea 文本域
1.name----设置文本域的名称----必写
2.id----设置文本域的id----选写
3.cols----设置文本域的列数----选写
4.rows----设置文本域的行数----选写
5.style="resize: none"----设置文本域不可拖拽----选写
整体架构流程
流程1，账号与密码栏的制作，账号栏设置输入框type的类型为文本输入框text，密码栏设置输入框的类型为密码输入框password，主要区别在于password不会显示输入的数据。具体代码和效果图如下：
<p><label for="nichen">账号：</label><input type="text" name="account" id="nichen" /></p>
<p><label for="pass">密码：</label><input type="password" name="psx" id="pass" /></p>
值得一提的是，如果需要点击账号或密码自动跳转至各自的输入框，则用<label for="输入框的id">账号</label>。
流程2，性别与爱好栏的制作，性别栏用单选框radio，爱好栏用多选框checkbox。默认选中添加checked属性。具体代码和效果图如下：
流程3，文本域的制作，cols为设置文本域的列数，rows为设置文本域的行数。如果需要设置文本域不可拖拽则添加style="resize: none"，具体代码与效果图如下：
<p>简介： <textarea name="introduce" cols="30" rows="8"></textarea></p>
流程4，日期、电话和邮箱栏的制作。
流程5，注册和清空按钮的制作，如果需要点击按钮，在网页上弹出提示框，则在后面加上οnclick="alert('注册成功')"。
技术细节
如果有特殊需要，要对表单加外框，可以在需要加框的代码外加上<fieldset></fieldset>，要注意的是他必须在body内。在外框上加注释则在<fieldset>后加<legend><h3>注释</h3></legend>。具体效果可以参考以下代码的结果图。
小结
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单练习4</title>
</head>
<body>
<fieldset>
<legend><h3>注册界面</h3></legend>
<p><label for="nichen">账号：</label><input type="text" name="account" id="nichen" /></p>
<p><label for="pass">密码：</label><input type="password" name="psx" id="pass" /></p>
<p>性别<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="femal" />女
<input type="radio" name="gender" value="secret" checked="checked"/>保密</p>
<p>爱好<input type="checkbox" name="aihao" value="football" checked="checked"/>足球 <input type="checkbox" name="aihao" value="basketball" />篮球
<input type="checkbox" name="aihao" value="badminton" />羽毛球
<input type="checkbox" name="aihao" value="sing" />唱歌
<input type="checkbox" name="aihao" value="dance" />跳舞
</p>
<p>简介： <textarea name="introduce" cols="30" rows="8"></textarea></p>
<p>生日<input type="date" name="birthday" /></p>
<p>邮箱<input type="email" name="youxiang" /></p>
<p>电话<input type="tel" name="phone" /></p>
<tr bgcolor="#808080">
<td colspan="2" align="center">
<input type="submit" value="注册" οnclick="alert('注册成功')" />
<input type="reset" value="清空"/>
</td>
</tr>
</fieldset>
</body>
</html>
效果图如下：
5560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
