如何用HTML制作一个简单的登录框

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

1 问题描述

在新手学习HTML时总想能够更快的掌握一些新的知识,在我学习HTML的时候总结了一个学习HTML的小经验,就是将学到的东西及时的应用,这样有利于我们能够更快的掌握一些新的知识。下面我们就来学习如何用HTML制作一个简单的登录框?

2 问题分析

当我们学习了一个新的知识后,为了能够更快的记住并掌握这个知识点我们就将自己学到的东西及时应用。俗话说实践是检验真理的唯一标准,这次我们来制作一个简单的登录框。首先我们要明白我们做的东西需要哪些知识点;然后明白这些知识点该怎么应用,对我们所做的登录框有一个完整的构思;最后是我们怎么能够正确的应用这些知识点。

3 解决方案

1、首先找到我们要做的登录框,这样我们就有一个明确的目标。

如何用HTML制作一个简单的登录框_第1张图片

2、在我们学习了的HTML中搜寻制作这个登录框所需要的知识,并正确的应用。

 上面的这个登录框,我们所要应用到的就是HTML中的表格和表单这两个知识点。然后对登录框整体有一个构思,我们所需要的是四行三列且边框为实线每个单元格中间的距离为零,单元格的边距为零。将登录框的大体写出来之后,再进行单元格的纵向和横向合并。合并完单元格之后再标签中的正确位置填上所需要的文字,我们文字填完之后就要在恰当的位置引入表单制作登录是需要填写的文本框,然后在恰当的位置写入提交按钮并注明提交按钮的作用;最后并让所有的文字及按钮居中。

DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8" />

       <title>作业title>

    head>

    <body>

       <table border="1" width="50%" height="100%" cellspacing="0" cellpadding="0">

           <tr>

              <td width="30%"  align="center" rowspan="4">总体信息td>

              <td colspan="2" width="70%" align="center">用户注册td>

           tr>

           <tr>

              <td align="right" width="20%">用户名:td>

              <td width="50%" align="center">

                  <form>

                     <input type="text" value="填写用户名">

                  form>

              td>

           tr>

           <tr>

              <td width="20%" align="right">    码:td>

              <td align="center">

                  <form>

                     <input type="text">

                  form>

              td>

           tr>

           <tr>

              <td colspan="2" align="center">

                  <form action="">

                     <input type="button" value="注册">

                     <input type="button" value="重置">

                  form>

              td>

           tr>

       table>

    body>

html>

这样一个简单的登录框就制作完成了。

如何用HTML制作一个简单的登录框_第2张图片

4 总结

我们在做任何事情的时候要有明确的目标这样我们就有了一个奋斗的方向,同时也要明白我们所需要的东西。在制作登录框时我们要明白我们所需要的知识点是哪些,要注意表格的布局及其标签的配套使用,注意每个标签的用处。

更多精彩文章:

 

如何用HTML制作一个简单的登录框_第3张图片

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

你可能感兴趣的:(前端开发)