1.制作用户登录表单
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post"><!-- 定义表单的标签 -->
<fieldset><!-- 在相关表单控件周围绘制边框 -->
<legend>用户登录表单</legend><!-- 为这一组表单控件定义标题 -->
<label>
用户名:<input type="text" id="userName" placeholder="请输入用户名"/>
</label>
<label>
密码:<input type="password" id="userPassword"/>
</label>
<br /><br />
<input type="submit" value="提交" id="submitBtin"/>
</fieldset>
</form>
<form>
<fieldset>
<legend>用户登录表单</legend>
<p>方式一</p>
<label>
用户名:<input type="text" id="userName" placeholder="请输入用户名"/>
</label>
<p>方式二</p>
<label for="userName">用户名:</label>
<input type="text" id="userName" placeholder="请输入用户名">
</fieldset>
</form>
</body>
</html>
2. 表单的结构
<from>标签是所有表单控件的基本容器
<form action="URL" method="post">
<!-- 表单控件 -->
</form>
每一个from标签都有一个action属性,其定义了提交数据的URL。
Method属性,定义了提交表单数据的两种方式get和post
Get方式:将表单数据以名称/值对的形式附加在action所定义的URL末尾来进行传输,默认情况是采用get方式
注意:
Get中URL中的参数是可见的,所以说是不安全的
URL长度有限的,get方式常用于短表单的数据传递
Post方式:将表单数据放在HTTP头信息中进行传输。(安全)有以下情景
用户上传文件时
表单数据非常长
包含保密的数据
3.<lable>标签
用于为input元素定义描述信息,例如表单控件的名称等,还可以扩大表单控件的焦点区域。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<fieldset>
<legend>用户登录表单</legend>
<p>方式一</p>
<label>
用户名:<input type="text" id="userName" placeholder="请输入用户名"/>
</label>
<p>方式二</p>
<label for="userName">用户名:</label>
<input type="text" id="userName" placeholder="请输入用户名">
</fieldset>
</form>
</body>
</html>
4,<fieldset>和<legend>标签(用于将表单控件进行分组)
<fieldset>控件用于在相关表单控件周围绘制边框
<legend>控件用于为这一组表单控件定义标题
5,input输入控件
部分属性如下代码示例
用户名:<input type="text" id="userName" placeholder="请输入用户名"/>
<br/>
密码:<input type="text" id="userPassword"/>
<br/>
<input type="submit" value="提交" name ="submitBtn"/>
<br/>
<input type="image" src="../img/2ee18-231100-163232346010b0.jpg" width="100px" height="100px"/>