使用H5中的表单标签制作一个简单的网页登陆页面

简单介绍H5当中的表单标签。<form></form>表示定义一个表单的开始和结束。在form标签中，有主要的三个属性，action表示声明表单中的数据的处理的url地址。method属性表示定义浏览器将表单中的数据提交给服务器端的方式，有get和post两种方式，默认是get。name属性用于设置表单的名称，一般如果存在多个表单的话为了避免混乱而进行设置的。

在form标签中，常用的子标签就是<input > input具备对表单中的数据进行处理分析和存储等属性。它可以通过设置type来执行表单中不同的操作，常见的type属性有text image submit

以下就是我们需要使用表单来制作出来的效果

由图可分析出此页面由六行三列的表格形成，是表单的形式。所以我们先把整体的轮廓给写出来。这里我只写了六行，至于列的话还没有进行设置。然后我们创建完之后，就可以逐行分析当中的内容，根据图片要求去编写代码

<head><meta charset="utf-8" /><title></title></head><body><form action="" name="login" method="post"><table><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></table></form></body>
</html>

以下就是最终成果的代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><form action="" name="login" method="post"><table border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="orange" colspan="3" width="190">&nbsp;&nbsp;&nbsp;&nbsp;<font color="white"><b>新用户注册</b></font></td></tr><tr><td height="40"><input type="text" name="username" placeholder="用户名" ></td><td>&nbsp;&nbsp;<font color="red">*</font></td></tr><tr><td height="40"><input type="password" name="password" placeholder="密码"></td><td>&nbsp;&nbsp;<font color="red">*</font></td></tr><tr><td height="40" ><input type="password" name="repassword" placeholder="确认密码"></td><td>&nbsp;&nbsp;<font color="red">*</font></td></tr><tr><td><input type="text" name="yzm" placeholder="验证码"></td><td><input type="image" src="img/getimage.jpg" height="40"></td><td><font>点击<a href="">换一张</a></font></td></tr><tr><td align="center"><input type="image" src="img/btn_img.png"></td><td><font><a href="">《网站服务协议》</a></font></td></tr></table></form></body>
</html>

最终的效果展示如下

重点的标签属性。placeholder属性，该属性用在input中，表示添加一个表单提示，但该提示不影响用户的输入。

还有在进行密码表单的编写时，type类型为password。以及form标签中的action属性 method属性都不要忘记写，否则表单最终无法找到执行数据的url路径以及数据的处理方式

使用H5中的表单标签制作一个简单的网页登陆页面相关推荐

前端开发表单标签完成一个简单登陆的效果 0228
表单标签的功能提交数据给服务器表单的基本结构格式各样的控件 input标签的多样性目标效果表格的结构设置宽高合并单元格继续合并单元格填写内容 . 插入表单控件按钮添加按钮居中用 ...
HTML+CSS第四课2：利用表单标签制作一个百度搜索框
知识点:表单<form>标签.<input />标签的使用. 问题描述:在html中制作一个百度搜索框,要求,在搜索框里输入关键词后,点击搜索,能够跳转到百度搜索结果页面. 代 ...
用java写注册表单_利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面 form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构: 页面结构大体就是这样子的~ 利用HTML表单标签编写一个注册页面表单标签: 所有需要提交到服务 ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节查看作业目录需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具实现思路: 使用history对象中的 forward() 方法和 ...
使用php创建一个注册表单,如何实现一个简单的注册表单
创建一个注册表单是非常容易的 - 它事实上意味着,你只需要创建一个表单,表单将更新一些User的模型对象(这个例子是一个Doctrine实体)并保存它. 受欢迎的FOSUserBundle 提供了一个 ...
用计算机怎么做成绩表,利用Excel制作一个简单的学生成绩表.doc
利用Excel制作一个简单的学生成绩表教学设计表学科信息技术授课年级八年级学校教师姓名章节名称初中信息技术八年级上册第7课(第1节)计划学时1学时学习内容分析学习Excel的基础知识, ...
教你快速制作一个简单的网页
像下面这样一个简单的网页怎么制作呢? 通过这篇文章,可以让你基本掌握一个HTML的结构和常用标签的使用需要用到的常用标签 <b> 加粗</b> ~~~~~~~~~~~~~~~ ...
用DIV+CSS技术制作一个简单的网页我的家乡主题
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

使用H5中的表单标签制作一个简单的网页登陆页面

使用H5中的表单标签制作一个简单的网页登陆页面相关推荐

最新文章

热门文章