web前端开发基础－－－制作表单类页面
Web前端开发之表单的制作和Input控件的使用
·
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"/>
技术共进，成长同行——讯飞AI开发者社区
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)