HTML制作一个简单登录,注册页面

登录界面设计

采用表格设计,能让登录界面对齐,更美观

    <title>登录页面

    <!--success.html是点击登录后跳转的成功界面,参数采用post方法传递-->

    <form action="success.html" method="post">

      <table align="center">

          <!--输入用户名-->



            用户名 :



              <input type="text" name="name" value="" />

          <!--输入密码-->

          <td>密码 :

          <td><input type="password",name="password" value=""/>

            <button type="submit">登录

          <!--如果没有账号,则跳转到注册页面-->



            没有账号?

            <a href="register.html">注册

注册页面设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    form标签就是表单
    input type="text"输入文本
    input type="password"输入密码
    input input type="radio"输入单选框
    input type="checkbox"输入多选框
    <select><option></option><select>下拉选择列表
    <textarea rows="10" cols="20">自我评价</textarea>输入文本框
    input type="reset"重置
    input type="submit"确认

-->
<!--提交表单,然后跳转到表单提交成功页面-->
  <form action="registerSuccess.html">
    <table align="center">
      <tr>
        <td>用户名:</td>
        <td>
          <input type="text" name="name" value=""/>
        </td>
      </tr>
      <tr>
        <td>密码:</td>
        <td>
          <input type="password" name="password" value=""/>
        </td>
      </tr>
      <tr>
        <td>确认密码:</td>
        <td><input type="password" name="confirmPassword" value=""/></td>
      </tr>
      <tr>
        <td>性别:</td>
        <!--单选框,checked=“checked”设置默认选项-->
        <td>
          <input type="radio" name="sex" checked="checked"/>男
          <input type="radio" name="sex"/>女
        </td>
      </tr>
      <tr>
        <!--多选框,同样可以用checked=“checked”设置默认选项-->
        <td>兴趣爱好:</td>
        <td>
          <input type="checkbox" checked="checked"/>Java
          <input type="checkbox"/>JavaScript
          <input type="checkbox"/>C++
        </td>
      </tr>
      <tr>
        <!--下拉选择列表,可以通过selected=“selected”设置默认选项-->
        <td>国籍:</td>
        <td>
          <select>
            <option>中国</option>
            <option selected="selected">日本</option>
            <option>美国</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>自我评价:</td>
      </tr>
      <tr>
        <!--文本输入框,可以通过设置cols来设置列的数目,通过rows设置行的数目-->
        <td>
          <textarea rows="10" cols="20">自我评价</textarea>
        </td>

      </tr>
      <tr>
        <!--type=“reset”重置所有输入-->
        <td>
          <input type="reset" value="重置">
        </td>
        <td>
          <!--type=“submit”提交表单-->
          <input type="submit" value="注册" >
        </td>
      </tr>
    </table>

  </form>

</body>
</html>

登录成功页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
  <h1>
    欢迎回来!!!
  </h1>
</body>
</html>

注册成功页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>
  恭喜你已成功注册!!!
  <a href="login.html">立即登录</a>
</h1>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。