HTML简单登录和注册页面及input标签诠释

今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容:

HTML是一种超文本标记语言.HTML 标签是由尖括号包围的关键词,比如 <html>。HTML 标签通常是成对出现的,比如 <b> 和 </b>;

<html> 与 </html> 之间的文本描述网页;

<body> 与 </body> 之间的文本是可见的页面内容,<h1> 与 </h1> 之间的文本被显示为标题,<p> 与 </p> 之间的文本被显示为段落;

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定,如<a href="网址">链接名称</a>;

标题(Heading)是通过 <h1> - <h6> 等标签进行定义的;

<h1> 定义最大的标题,<h6> 定义最小的标题;

h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推;

<hr /> 标签在 HTML 页面中创建水平线;

hr 元素可用于分隔内容;

HTML 图像是通过 <img> 标签进行定义的,如<img src="图片地址" 宽="**" 高="**" />;

以下是简单的登录页面HTML文本及效果:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
    <style type="text/css" rel="stylesheet">
        .wrap{margin:0 auto;width:400px;}
    </style>
</head>
    <body>
        <div class="wrap">
          <h1>网站后台管理系统</h1>
          <fieldset>
            <form action="/example/html/form_action.asp" method="get">
                <p>用户名: <input type="text" name="name" /></p>
                <p>密&nbsp;&nbsp;&nbsp;&nbsp;码: <input type="text" name="name" /></p>
                <p>验证码: <input size="10" name="name" /></p>
                <button type="button">登录</button>&nbsp;&nbsp;&nbsp;<input type="button" onclick="window.location.href(‘C:/Users/hailang/Desktop/register.html‘)" value="注册" />
            </form>
          </fieldset>
        </div>
    </body>
</html>

以下是注册页面HTML文本及效果:

<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css" rel="stylesheet">
        .wrap{margin:0 auto;width:500px;}
    </style>
</head>
    <body>
        <div class="wrap">
          <h1>网站后台管理系统</h1>
            <form action="/example/html/form_action.asp" method="get">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;用户名: <input type="text" name="name" /></p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码: <input type="text" name="name" /></p>
                <p>确认密码: <input  type="text" name="name" /></p>
                <p>电子邮件: <input  type="text" name="name" /></p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别:<label><input name="Fruit" type="radio" value="" checked />保密 </label>
                         <label><input name="Fruit" type="radio" value="" />男</label>
                         <label><input name="Fruit" type="radio" value="" />女 </label>
                </p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日:<select name="select" id="select_k1" class="xla_k">
                            <option value="请选择">请选择</option>
                            <option value="1989">1989</option>
                            <option value="1990">1990</option>
                            <option value="1991">1991</option>
                        </select>年
                        <select name="select" id="select_k1" class="xla_k">
                            <option value="请选择">请选择</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                        </select>月
                        <select name="select" id="select_k1" class="xla_k">
                            <option value="请选择">请选择</option>
                            <option value="17">17</option>
                            <option value="16">16</option>
                            <option value="15">15</option>
                        </select>日
                </p>
                </p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱好:<input type=checkbox checked> 读书
                          <input type=checkbox>旅游
                          <input type=checkbox value=1>足球
                          <input type=checkbox value=1>篮球
                          <input type=checkbox value=1>乒乓球
                </p>
                <p>个人说明:<textarea name="yj" cols="30" rows="6"></textarea>
                </p>
            </form>
        </div>
    </body>
</html>
 

input标签

<input>(输入) 标签用于搜集用户信息

<input> 标签没有结束标签

image(图像)属性只能与 <input type="image"> 配合使用。它规定图像输入相对于周围其他元素的对齐方式。

它的值有:

  • left(左边)
  • right(右边)
  • top(前)
  • middle(中)
  • bottom(低)

checked(预先选定复选框或单选按钮) 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

height (定义 input 字段的高度)属性只适用于 <input type="image">。

disabled (在文本框中设置disabled="disabled"将无法输入)属性规定应该禁用 input 元素,无法与 <input type="hidden"> 一起使用.

formnovalidate 属性覆盖 form 元素的 novalidate 属性,如果使用该属性,带有两个提交按钮的表单(一个进行验证,另一个不验证)。

name 属性规定 input 元素的名称。

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

readonly 属性规定输入字段为只读。

size 属性规定输入字段的宽度。

src 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的地址。

ype 属性规定 input 元素的类型。

它的值有:<input type="text" /> 定义用户可输入文本的单行输入字段。

<input type="button" /> 定义可点击的按钮,但没有任何行为。

<input type="checkbox" /> 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

<input type="file" /> 用于文件上传。

     <input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。

     <input type="image" /> 定义图像形式的提交按钮。必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。

     <input type="password" /> 定义密码字段。密码字段中的字符会被掩码(显示为星号或原点)。

     <input type="radio" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

     <input type="reset" /> 定义重置按钮。重置按钮会清除表单中的所有数据。

     <input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。

时间: 2024-08-24 17:12:21

HTML简单登录和注册页面及input标签诠释的相关文章

JSP之登录,注册页面(三)

摘要:本系列会制作一个简单的需要JSP,servlet,oracle一起完成的登录,注册页面 6,注册界面  regist.jsp 1 <%@ page language="java" import="java.util.*" pageEncoding="GBK" contentType="text/html; charset=GBK"%> 2 <% 3 String path = request.getCo

JSP之登录,注册页面(四)

摘要:本系列会制作一个简单的需要JSP,servlet,oracle一起完成的登录,注册页面 8,pojo层   User.java 1 package pojo; 2 3 public class User { 4 private String name; 5 private String password; 6 public String getName() { 7 return name; 8 } 9 public void setName(String name) { 10 this.n

html—登录及注册页面设计

一.文字处理 1.文字加粗:<strong><\strong> 2.文字换行:<br/> 3.文档标题:title 4.整体文字居中<body align="center"> 5.整体字体颜色:<body style="color:white"> 6.段落:<p> 7.标题:<h1>~<h6> 二.超链接设置 1.字体链接:<a href="链接地址&qu

python3 简单登录,注册测试代码

''' 写个登录,注册的简单代码.只用来简单测试,实现简单功能,没有过多的条件判断.仅仅用来练习. ''' def login(username,password): ''' db这个文件的路径是当前目录 打开保存账号密码的文件,将文件中的账号密码读出来,以字典格式保存. 如果输入的账号已经存在于字典中的键,结果返回FALSE. 如果账号存在字典且对应的键值等于输入的密码,则返回True. ''' fo=open('db','r') dict1={} for i in fo: i=i.strip

十八、完成登录与注册页面的前端

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 登录页面: 1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link href=".

完成登录与注册页面的前端

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆测试界面</title> <link href="https://maxc

完成登录与注册页面的前端0

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎您,请登陆</title> <script type="text/java

作业18-完成登录与注册页面的前端

#html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>霓虹 - 点击打开你的视野</title> <link href="../static/css/denglu.css" rel="stylesheet" type="text/css"

登录,注册页面练习

数据库: create database aspnet go use aspnet go create table Umz ( Umzz nvarchar(20) primary key,--民族代号,主键 Ummz nvarchar(20)--民族 ) insert into Umz values('M1','汉族') insert into Umz values('M2','回族') insert into Umz values('M3','壮族') insert into Umz valu