H5製作簡單登入介面-H5教程-PHP中文網

首頁

web前端

H5教程

H5製作簡單登入介面

May 10, 2018 pm 04:57 PM

html5 介面登入

本篇文章主要介紹如何用html5製作一個簡單的登入介面，有興趣的小夥伴參考下。

程式碼如下：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .jieshao{
                width: 300px;
                border-bottom: 2px dashed;
            }
            .div0{
                width: 400px;
                border: 1px solid cornflowerblue;
                line-height: 30px;
                padding-left: 50px;
            }
            .zi{
                font-size: 13px;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;div0&quot;&gt;
        &lt;form action=&quot;http://www.baidu.com&quot; method=&quot;post&quot;&gt;
            &lt;span style=&quot;padding-left: 33px;&quot;&gt;昵称：&lt;input type=&quot;text&quot; name=&quot;wd&quot; id=&quot;wd&quot; value=&quot;&quot; /&gt;&lt;/span&gt;&lt;/br&gt;
            真实姓名：&lt;input type=&quot;password&quot; name=&quot;ps&quot; id=&quot;ps&quot; value=&quot;123456&quot; /&gt;
            &lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;所有人可见&quot;&gt;所有人可见&lt;/option&gt;
                &lt;option value=&quot;仅自己可见&quot;&gt;仅自己可见&lt;/option&gt;
            &lt;/select&gt;&lt;br /&gt;
            &lt;span style=&quot;padding-left: 18px;&quot;&gt;所在地 : &lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;北京&quot;&gt;北京&lt;/option&gt;
                &lt;option value=&quot;武汉&quot;&gt;武汉&lt;/option&gt;
            &lt;/select&gt;
            &lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;朝阳区&quot;&gt;朝阳区&lt;/option&gt;
                &lt;option value=&quot;洪山区&quot;&gt;洪山区&lt;/option&gt;
            &lt;/select&gt;&lt;/span&gt;&lt;br /&gt;
            &lt;span style=&quot;padding-left: 33px;&quot;&gt;生日 : &lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;2009&quot;&gt;2009&lt;/option&gt;
                &lt;option value=&quot;1997&quot;&gt;1997&lt;/option&gt;
            &lt;/select&gt;
            年&lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;01&quot;&gt;01&lt;/option&gt;
                &lt;option value=&quot;08&quot;&gt;08&lt;/option&gt;
            &lt;/select&gt;
            日&lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;01&quot;&gt;01&lt;/option&gt;
                &lt;option value=&quot;18&quot;&gt;18&lt;/option&gt;
            &lt;/select&gt;
                   &lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;保密&quot;&gt;保密&lt;/option&gt;
                &lt;option value=&quot;不保密&quot;&gt;不保密&lt;/option&gt;
            &lt;/select&gt;&lt;/span&gt;&lt;br /&gt;

            博客地址：&lt;input type=&quot;text&quot; name=&quot;wd&quot; id=&quot;wd&quot; value=&quot;&quot; /&gt;
                &lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;所有人可见&quot;&gt;所有人可见&lt;/option&gt;
                &lt;option value=&quot;仅自己可见&quot;&gt;仅自己可见&lt;/option&gt;
            &lt;/select&gt;&lt;br /&gt;

            常用邮箱：mofeiangmotao@sina.com&lt;br /&gt;

            &lt;span style=&quot;padding-left: 36px;&quot;&gt;QQ：&lt;input type=&quot;text&quot; name=&quot;wd&quot; id=&quot;wd&quot; value=&quot;&quot; /&gt;&lt;/span&gt;&lt;br /&gt;

            &lt;span style=&quot;padding-left: 28px;&quot;&gt;EMS：&lt;input type=&quot;text&quot; name=&quot;wd&quot; id=&quot;wd&quot; value=&quot;&quot; /&gt;&lt;/span&gt;&lt;br /&gt;
            &lt;span style=&quot;padding-left: 30px;&quot;&gt;介绍：&lt;/span&gt;
            &lt;div class=&quot;jieshao&quot; &gt;
            &lt;textarea  name=&quot;&quot; rows=&quot;10&quot; cols=&quot;20&quot; style=&quot;resize: none;  width: 300px;height: 100px; &quot;&gt; 
            &lt;/textarea&gt;
            &lt;/div&gt;
            &lt;p class=&quot;zi&quot;&gt;以下信息可作为通过客服取回账号的依据&lt;/p&gt;
            证件类型  : &lt;/select&gt;
                   &lt;select name=&quot;&quot;&gt;
                &lt;option value=&quot;身份证&quot;&gt;身份证&lt;/option&gt;
            &lt;/select&gt;&lt;br /&gt;

            证件号码 : &lt;input type=&quot;text&quot; name=&quot;wd&quot; id=&quot;wd&quot; value=&quot;&quot; /&gt;&lt;br /&gt;

            &lt;input type=&quot;submit&quot; name=&quot;&quot; id=&quot;&quot; value=&quot;保存&quot; /&gt;


        &lt;/form&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

登入後複製

相關推薦：

使用Ajax安全的登入介面

CSS3製作粉紅色登入介面

使用jQuery,Angular實作登入介面驗證碼實例分享

Ajax實作帶有驗證碼的局部刷新登入介面

以上是H5製作簡單登入介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn