精华内容
下载资源
问答
  • html表单注册页面
    千次阅读
    2018-09-11 21:07:17

    1、HTML的表单标签 form表单 CSS样式

    HTML标签:表单标签

    1、form表单的基础介绍
        A.格式
            <form action="http://www.baidu.com" method="get"> ... </form>
        B.属性
            a. action存放的是URL 网址.(把表单项"输入框"当中的数据,提交到网址对应的服务器上)
            b. method 设置请求的方式 get请求和post请求
                get特点:  在地址栏有参数信息,数据量小,不安全
                post特点: 在地址栏没有参数信息,数据量大,安全
        C.注意
            如果要提交数据到地址栏,必须设置 【name】属性
    2、input标签
        A.type属性   根据type属性的取值不同,表单项当中的类型就不一样
            a. text 用户名的输入框
            b. password 密码的输入框
            c. radio 性别的单选按钮
            d. checkbox 爱好的多选按钮
            e. submit 提交按钮
            f. button 普通按钮 和后期JavaScript 组合使用
            g. image 图片按钮
            h. file 上传的文件选择框
            i. hidden 隐藏域.看不到UI界面,但是存在.
            j. date 选择日历的
            k.datetime 
            l.datetime-local 
            m.email 
        B.name属性
            a. 提交地址栏上面的name.给服务器进行识别的标志
            b. 对于单选按钮radio而言,设置相同的name属性,表示在同一组当中
            c. 对于多选按钮checkbox而言,设置相同的name属性,表示在同一组当中
        C.value属性
            给我们那些不能让用户输入的 表单项,设置的值
        D.id属性
            a.可以给后面的CSS设置样式的识别器
            b.可以给后面的JS设置识别具体是哪一个标签需要加特效.
        E.placeholder属性
            增强用户体验,给出默认提示信息的.
    3、select 下拉列表
        A.格式
            <select>
                <option value="China"> 中国 </option>
                <option value="USA"> 美国 </option>
                <option value="England"> 英国 </option>
            </select>
    4、textare 文本域
        A.格式 (例如:自我介绍)
            <textarea cols="20" rows="5"></textarea>
    

    CSS:页面美化和布局控制

    1、CSS引入的三种方式
        A.内联样式
            a.作用域:在当前的标签上面
            b.格式:
                <font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font>
        B.内部样式
            a.作用域:在当前的HTML页面上面
            b.格式:
                <head>
                    <meta charset="UTF-8">
                    <title>CSS入门</title>
    
                    <style type="text/css">
                        font{
                            font-size: 66px;
                            color: #0000FF
                        }
                    </style>
                </head>
                <body>
                    <font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font>
                    <br><br>
                    <font> 牛逼啊 </font>
                    <br><br>
                    <font> 我的哥就是你哥 倪歌(你哥) </font>
                </body>
        C.外部样式
            a.作用域: 只要你引入了外部样式,整个页面都可以使用.(需要在外部新建CSS文件)
            b.格式:
                <!-- HTML 代码 -->
                <head>
                    <meta charset="UTF-8">
                    <title>CSS入门</title>
    
                    <link rel="stylesheet" href="css/a.css">
                </head>
                <body>
                    <font> 牛逼啊 </font>
                    <br><br>
                    <font> 我的哥就是你哥 倪歌(你哥) </font>
                </body>
                <!-- CSS 代码 --> 
                font{
                    font-size: 44px;
                    color: #FF0000
                }   
    
            1. 基础选择器
                1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
                    * 语法:#id属性值{}
                2. 元素选择器:选择具有相同标签名称的元素
                    * 语法: 标签名称{}
                    * 注意:id选择器优先级高于元素选择器
                3. 类选择器:选择具有相同的class属性值的元素。
                    * 语法:.class属性值{}
                    * 注意:类选择器选择器优先级高于元素选择器
            2. 扩展选择器:
                1. 选择所有元素:
                    * 语法: *{}
                2. 并集选择器:
                    * 选择器1,选择器2{}
    
                3. 子选择器:筛选选择器1元素下的选择器2元素
                    * 语法:  选择器1 选择器2{}
                4. 父选择器:筛选选择器2的父元素选择器1
                    * 语法:  选择器1 > 选择器2{}
    
                5. 属性选择器:选择元素名称,属性名=属性值的元素
                    * 语法:  元素名称[属性名="属性值"]{}
    
                6. 伪类选择器:选择一些元素具有的状态
                    * 语法: 元素:状态{}
                    * 如: <a>
                        * 状态:
                            * link:初始化的状态
                            * visited:被访问过的状态
                            * active:正在访问状态
                            * hover:鼠标悬浮状态
     属性
        1. 字体、文本
            * font-size:字体大小
            * color:文本颜色
            * text-align:对其方式
            * line-height:行高 
        2. 背景
            * background:
        3. 边框
            * border:设置边框,符合属性
        4. 尺寸
            * width:宽度
            * height:高度
        5. 盒子模型:控制布局
            * margin:外边距
            * padding:内边距
                * 默认情况下内边距会影响整个盒子的大小
                * box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小
    
            * float:浮动
                * left
                * right
    

    案例:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>注册页面</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
            body{
                background: url("img/register_bg.png") no-repeat center;
                padding-top: 25px;
            }
    
            .rg_layout{
                width: 900px;
                height: 500px;
                border: 8px solid #EEEEEE;
                background-color: white;
                /*让div水平居中*/
                margin: auto;
            }
    
            .rg_left{
                /*border: 1px solid red;*/
                float: left;
                margin: 15px;
            }
            .rg_left > p:first-child{
                color:#FFD026;
                font-size: 20px;
            }
    
            .rg_left > p:last-child{
                color:#A6A6A6;
                font-size: 20px;
    
            }
    
    
            .rg_center{
                float: left;
               /* border: 1px solid red;*/
    
            }
    
            .rg_right{
                /*border: 1px solid red;*/
                float: right;
                margin: 15px;
            }
    
            .rg_right > p:first-child{
                font-size: 15px;
    
            }
            .rg_right p a {
                color:pink;
            }
    
            .td_left{
                width: 100px;
                text-align: right;
                height: 45px;
            }
            .td_right{
                padding-left: 50px ;
            }
    
            #username,#password,#email,#name,#tel,#birthday,#checkcode{
                width: 251px;
                height: 32px;
                border: 1px solid #A6A6A6 ;
                /*设置边框圆角*/
                border-radius: 5px;
                padding-left: 10px;
            }
            #checkcode{
                width: 110px;
            }
    
            #img_check{
                height: 32px;
                vertical-align: middle;
            }
    
            #btn_sub{
                width: 150px;
                height: 40px;
                background-color: #FFD026;
                border: 1px solid #FFD026 ;
            }
    
        </style>
    
        </head>
        <body>
    
        <div class="rg_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
    
            </div>
    
            <div class="rg_center">
                <div class="rg_form">
                    <!--定义表单 form-->
                    <form action="#" method="post">
                        <table>
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="tel">手机号</label></td>
                                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label>性别</label></td>
                                <td class="td_right">
                                    <input type="radio" name="gender" value="male"> 男
                                    <input type="radio" name="gender" value="female"> 女
                                </td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="checkcode" >验证码</label></td>
                                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                    <img id="img_check" src="img/verify_code.jpg">
                                </td>
                            </tr>
    
    
                            <tr>
                                <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                            </tr>
                        </table>
    
                    </form>
    
    
                </div>
    
            </div>
    
            <div class="rg_right">
                <p>已有账号?<a href="#">立即登录</a></p>
            </div>
    
    
        </div>
    
    
        </body>
        </html>
    
    更多相关内容
  • HTML中使用表单标签制作注册页界面,表单标签重要的是使用type属性
  •  - 使用表格实现页面效果  - 超链接不想要有效果,使用href="#"  - 如果表格里面的单元格没有内容,使用空格作为占位符    - 使用图片标签提交表单 <input type="image" src="图片的路径"/>   完整...
  • html5用手机号码注册表单代码是一款适合手机APP软件手机页面注册模板下载。
  • 运行结果如图 代码如下 源码地址 点击跳转下载源码

    运行结果如图所示 

     代码如下

    源码地址

    点击跳转下载源码

    展开全文
  • html注册登录表单

    2015-12-16 21:14:10
    html注册登录表单,包含js/css代码,有需求的可下载。
  • 带背景Form注册表单HTML模板是一款Step Registration Form注册表单html模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • 利用HTML表单标签编写一个注册页面

    千次阅读 2021-06-10 02:21:45
    原标题:利用HTML表单标签编写一个注册页面今天我们来写一个注册页面form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构:页面结构大体就是这样子的~ 表单标签:所有需要提交到服务器端的表单项...

    原标题:利用HTML表单标签编写一个注册页面

    今天我们来写一个注册页面

    form表单

    先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构:

    页面结构大体就是这样子的~

    358e0bb05f4614b85d6a72b45375d690.png

    表单标签:

    所有需要提交到服务器端的表单项必须使用

    包起来~

    form标签的属性:

    action:整个表单提交的位置(可以是一个页面,也可以是一个后台的Java代码)

    method:表单的提交方式(get/post)

    文本输入框:

    密码输入框:

    单选按钮:

    多选按钮:

    主意:在这边需要用name属性给按钮分一下组~

    下拉列表:

    --请选择--

    选项

    文本输入域:

    提交按钮:

    重置按钮:

    普通按钮:

    上面的注册页面不是那么好看,下面我们用上次学过的表格标签(

    bc2af3732f3b07a06de9410aa6cebb0c.png

    下面是修改后的页面的源代码:

    用户注册

    用户注册 USER REGISTER

    用户名
    密码
    确认密码
    Email
    姓名
    性别

    出生日期
    验证码

    yzm.png

    注意哦~这边会有一道面试题的

    Get 与 Post 提交方式的区别?

    Get(默认)提交方式,

    所有的内容显示的地址栏,不安全,长度有限制.

    Post提交方式,

    所有的内容不会显示在地址栏,比较安全,长度没有限制.

    94e6c74c18e07ec16a70ad5aa126046a.png

    我是萌新娜娜

    立志做一个不翻车的老司机

    学习Java的路上请多多指教返回搜狐,查看更多

    责任编辑:

    展开全文
  • 一个非常简单的登录表单页面,包含jq动态效果以及简单验证。简洁透明HTML登录表单页面.rar,点击下载吧。
  • jQuery提交左右摇晃登录注册表单页面html模板
  • 1、步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
  • 大家好,今天给大家介绍一款,html透明表单登录注册页面源码(图1)。送给大家哦,获取方式在本文末尾。 图1 自适应页面,适合于各种分辨率(图2) 图2 部分源码: <!doctype html> <html> &...

    大家好,今天给大家介绍一款,html透明表单登录注册页面源码(图1)。送给大家哦,获取方式在本文末尾。

    图1

    自适应页面,适合于各种分辨率(图2)

    图2

    部分源码:

    <!doctype html>
    <html>
    <head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- font files  -->
    <link href='#css?family=Muli:400,300' rel='stylesheet' type='text/css'>
    <link href='#css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
    <!-- /font files  -->
    <!-- css files -->
    <link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
    <!-- /css files -->
    </head>
    <body>
    <h1>Unique Login Form</h1>
    <div class="log">
    	<div class="content1">
    		<h2>Sign In Form</h2>
    		<form>
    			<input type="text" name="userid" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}">
    			<input type="password" name="psw" value="PASSWORD" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'PASSWORD';}">
    			<div class="button-row">
    				<input type="submit" class="sign-in" value="Sign In">
    				<input type="reset" class="reset" value="Reset">
    				<div class="clear"></div>
    			</div>
    		</form>
    	</div>
    	<div class="content2">
    		<h2>Sign Up Form</h2>
    		<form>
    			<input type="text" name="userid" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'NAME AND SURNAME';}">
    			<input type="tel" name="usrtel" value="PHONE" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'PHONE';}">
    			<input type="email" name="email" value="EMAIL ADDRESS" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'EMAIL ADDRESS';}">
    			<input type="password" name="psw" value="PASSWORD" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'PASSWORD';}">
    			<input type="submit" class="register" value="Register">
    		</form>
    	</div>
    	<div class="clear"></div>
    </div>
    <div class="footer">
    	
    </div>
    
    </body>
    </html>
    

    图3

    本模板编码:10134,需要的朋友,点击下面的链接后,搜索10134,即可获取。

    就爱UI - 分享UI设计的点点滴滴icon-default.png?t=M3C8https://www.92ui.net/

    展开全文
  • html5+css3登录注册表单切换页面代码.zip
  • html注册表单代码

    2013-06-23 11:44:35
    这是一个html表单代码,用于会员注册,简单易懂,例如: 性别选择部分: 性别: 男 女 </td> </tr>
  • HTML5 好看的注册表单

    2014-11-14 10:09:55
    注册表单在网页应用中十分重要,今天要向大家分享一款基于HMLT5的分步骤注册表单页面表单外观比较华丽,点击下一步按钮即可跳转到下一步填写注册信息。该HTML5表单使用了很多CSS3属性,从而在表单切换时拥有弹性的...
  • 用户注册表单网页,有两次密码输入是否正确的判断,提交窗口的弹出,同页面的重制和提交,多个选项的设置,下拉菜单的设置
  • 实用的表单注册html模板,登陆非常好看
  • 使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于iframe框架实现的。现在小编整理特此分享脚本之家平台供大家参考
  • 正则表达式方式的验证方式,这个验证比较标准而且比较全面...表单验证类Validator v1</title> <style> body,td{font:normal 12px Verdana;color:#333333} input,textarea,select,td{font:normal 12px Ve
  • jquery表单验证代码百度注册页面表单验证
  • jQuery用户注册表单验证页面代码,手机注册用户,设置密码等
  • 实用的登录_注册表单切换页面模板,基于js css3制作登录和注册表单合成切换效果,支持第三方账号按钮登录注册。这是一款简单通用的用户会员登录注册表单页面模板。
  • 简洁登录注册表单页面模板
  • html5手机登录表单验证代码是一款自定义标签属性的手机登录表单验证特效。
  • 主要介绍了JavaWeb表单注册界面的实现方法的相关资料,希望通过本文大家能掌握这部分内容,需要的朋友可以参考下
  • 注册和登录页面html5表单模板,大气实用的注册表单和登录表单模板下载
  • bootstrap登录注册表单切换页面

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 118,259
精华内容 47,303
关键字:

html表单注册页面