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" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。

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

JavaWeb 实现简单登录、注册功能
1.首先创建一个简单的动态Javaweb项目 2.然后手动建立文件目录: 项目创建好之后,在src下建几个包: controller:控制器,负责转发请求,对请求进行处理,主要存放servlet: d ...
解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题
注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...
PHP用户登录与注册页面
PHP用户登录模块实现项目包含的功能脚本: login.php//登录 reg.php//注册用户 user_add.php//注册校验脚本 user_login_check.php//登录校验脚本 ...
aspx页面中用Input 标签实现上传图片功能
实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype=" ...
node.js实现简单的登录注册页面
首先需要新建四个文件一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...
javaWeb登录注册页面
简单的登陆注册页面 1.配置JDBC驱动连接数据库 2. 配置struts2框架 3. 利用1 2完成登录页面, 注意做到不耦合,即servlet Api和控制器完全脱离) 4. 利用1 2 制作注册 ...
老男孩Day16作业：登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
我的Vue之旅、05 导航栏、登录、注册 (Mobile)
第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...
AJAX的简单示例：注册校验
众所周知,我们每次需要注册一个网站的用户名时,都会校验该邮箱.用户名是不是正确的格式.是不是有被使用过,密码是否符合规则,二次确认是否符合. 如果这些校验都采用form表单提交的话,会给用户带来极不好 ...

随机推荐

TASK 的使用
http://www.tuicool.com/articles/IveiQbQ
Pseudo-class和pseudo-element的差别
相同点: Pseudo-class和pseudo-element的语法都是以selector或者selector.class开始的. 不同点: Pseudo-class的操作对象是文档树中已有的元素, ...
2018.10.02 NOIP模拟矩阵分组（二分答案）
传送门考场上并不会写二分的check函数,下来看了看题解发现真是妙极. 不难想到每次直接从四个角各按阶梯状拓展出合法区域A,再检验B是否合法就行了.(然而考场上写的弃疗了) 于是题解用了一些小技巧优 ...
2018.09.23 codeforces 1053B. Vasya and Good Sequences（前缀和）
传送门考试的时候卡了一会儿. 显然这个答案只跟二进制位为1的数量有关. 还有一个显然的结论. 对于一个区间[l,r][l,r][l,r],如果其中单个数二进制位为1的数量最大值不到区间所有数二进制位 ...
b2_trsd_EDSD_new
# -*- coding:utf-8 -*- import re ss="./data/" year = '17A' filename = ss+'EDSD%s.txt'%year ...
201709018工作日记--RecyclerView的使用（点击，瀑布流的实现）
参考相关博客: http://www.jianshu.com/p/55e3f1b6701f 刘望舒 http://www.jianshu.com/p/4fc6164e4709 王三的猫阿德 http ...
C++中的结构体的认识
C++中的结构体的认识 1. typedef的用法在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程的一部分,但它并不实际分配内存空间. 实例像:typedef ...
MFC中的Invalidate、OnDraw、OnPaint函数的作用
MFC中的Invalidate.OnDraw.OnPaint函数的作用 CWnd::Invalidate voidInvalidate( BOOL bErase = TRUE ); 该函数的作用是使 ...
Sometimes , less is more
给小团队的特别建议小团队的普遍现象在于人力紧张,不管是在创业公司还是在大公司内.对于不写代码就手痒的技术人员,如果再在技术上有点儿完美主义情节,那真是可以为代码鞠躬尽瘁的.稍微一整理,事情恨不得已经 ...
jquery使用ajax报错[Uncaught SyntaxError: Unexpected token :]
$.post('/ajax/validate.do',{"id": id},function(ret){ //ret }); 返回值明明是json,格式也是正确的,却解析不成功,在 ...

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

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

随机推荐

热门专题