2. 程式人生 > >WEB前端登入註冊頁面的form中使用placeholder佔位符

WEB前端登入註冊頁面的form中使用placeholder佔位符

阿新 • • 發佈：2019-02-05

在web的開發中有的時候我們需要使用者登入註冊頁面
需要在輸入框的裡面有灰色字型進行提示
我之前都是使用複雜的JavaScript來實現
實現點擊出現字元出現與消失
以及字元的顏色在灰色和黑色中變換
特別是密碼輸入框中需要涉及到兩個輸入框的顯示與隱藏
非常麻煩
但是使用了placeholder佔位符就不一樣了
可以方便快捷的實現這個功能

示例程式碼：

<body>
        <div id="div1">
            <div style="position: relative;">
                <img src="../img/headportrait-login-register.png"
 
 class="img1">
                <input id="button_login" class="button1" type="button" value="登入" style="color:#E59A00" onclick="login_onclick()">
                <input id="button_register" class="button1" type="button" value="註冊" style="color: black;" onclick="register_onclick()">
            </div>
            <div class
 
="line"></div>
            <div id="user_register" style="display: none;">
                <input placeholder="使用者名稱" id="user_register_username" name="使用者名稱" class="input1" type="text" />
                <input placeholder="郵箱/手機號" id="user_register_contact" name="郵箱/手機號" class="input1"
 
 type="text" />
                <input placeholder="密碼" id="user_register_password" name="密碼1" class="input1" type="password" />
                <input placeholder="確認密碼" id="user_register_ensurepassword" name="確認密碼1" class="input1" type="password" />
                <input placeholder="驗證碼" name="驗證碼" class="securitycode" type="text" /><input value="獲取驗證碼" class="securitycode_made" type="button"><br>
                <input value="同意協議並註冊" name="同意協議並註冊" class="agreement" type="radio"><span class="agreement">同意協議並註冊</span><br>
                <input value="註冊" id="user_register_button" class="button2" type="button" onclick="ajax_user_register()" />
            </div>
            <form id="merchant_register" style="display: none">
                <input placeholder="使用者名稱" value="" name="使用者名稱" class="input1" type="text" />
                <input placeholder="郵箱/手機號" value="" name="郵箱/手機號" class="input1" type="text" />
                <input placeholder="密碼" value="" name="密碼3" class="input1" type="password" />
                <input placeholder="確認密碼" value="" name="確認密碼3" class="input1" type="password" />
                <input placeholder="驗證碼" value="" name="驗證碼" class="securitycode" type="text"><input value="獲取驗證碼" class="securitycode_made" type="button"><br>
                <!-- style="color: #747474;"-->
                <div class="havefile" id="leftfile">
                    <input name="店鋪門面照" class="file" id="photo" type="file">
                    <span class="infile">店鋪門面照</span>
                </div>
                <div class="havefile" id="rightfile">
                    <input name="經營許可證" class="file" type="file">
                    <span class="infile">經營許可證</span>
                </div><br>
                <input value="同意協議並註冊" name="同意協議並註冊" class="agreement" type="radio"><span class="agreement">同意協議並註冊</span><br>
                <input value="註冊" type="submit" class="button2">
            </form>
            <form id="login" style="display: block;">
                <input placeholder="使用者名稱/郵箱/手機號" id="login_username_email_mobilephone" name="使用者名稱/郵箱/手機號" class="input2" type="text">
                <input placeholder="密碼" id="login_password" name="密碼2" class="input2" type="password">
                <input placeholder="驗證碼" name="驗證碼" class="securitycode" type="text"><input value="獲取驗證碼" class="securitycode_made" type="button"><br>
                <input value="登入" type="button" class="button2" style="margin-top: 20px;" onclick="ajax_login()">
            </form>
            <div>
                <input id="button_merchant" class="button1" type="button" value="商家" style="color: black;" onclick="merchant_onclick()">
                <input id="button_user" class="button1" type="button" value="使用者" style="color: rgb(229, 154, 0);" onclick="user_onclick()">
            </div>
        </div>
    </body>

相關推薦

WEB前端登入註冊頁面的form中使用placeholder佔位符

在web的開發中有的時候我們需要使用者登入註冊頁面 需要在輸入框的裡面有灰色字型進行提示 我之前都是使用複雜的JavaScript來實現 實現點擊出現字元出現與消失 以及字元的顏色在灰色和黑色中變換 特別是密碼輸入框中需要涉及到兩個輸入框的顯示與隱藏

例子：實現最新版本Node.js中Express+mongodb的登入註冊頁面

由於版本差異巨大且不相容的情況下，作為才開始學習Node.js的菜鳥，書籍上的例子是不能看了，因此仿照著網路大神中的例子自己再歸納總結了一遍，方便自己以後檢視。好記性不如爛筆頭嘛。 這裡主要使用的版本是express4.0+mongodb最新版本以及Bootstrap3.0介面所做。 一

基於servlet的web表單登入註冊頁面

這篇部落格存放很久了，才看到一直在草稿箱裡，再整理一下發出來。 結合嗶哩嗶哩教學視訊，實際寫了一遍web的簡單專案。 一、專案結構圖 二、程式碼片段 1.建立實體類 程式碼如下： package com.liumce.bean; import

springboot整合JPA寫一個登入註冊頁面

建立工程 需要匯入的部件 application.yml配置檔案 spring: devtools: restart: enabled: false datasource: driver-class-name: com.mysql.cj.jdbc.Dr

bootstarp標籤頁實現登入註冊頁面

最簡單的實現樣式      <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <

nodejs+fs+express寫的前期的登入註冊頁面

首先，要把資料存放到本地，就必須使用後端，現在沒有使用資料庫而是使用原始的fs寫的一個登入和註冊的頁面，實現是使用者名稱不能重複，根據使用者名稱來判斷該使用者是否註冊過，資料夾中的檔案，是根據每個人的名字作為檔案的名稱。 先寫好前端的頁面，也就是註冊和登入的頁面，就是一個表

react專案實戰三 登入註冊頁面與資料庫連線

ps：此部分（第二部分）的程式碼，提交簡介為second commit 原始碼地址 需要引入依賴庫 npm install body-parser --save 接收post請求返回的引數 npm install utility --save MD5加密

使用bootstrap編寫登入註冊頁面，半透明仿蘋果系統風格。

 效果圖：  html程式碼：（程式碼不全） <!--登入按鈕--> <div class="col-xs-1 col-xs-offset-9 aTopAndBottom"> <a hr

移動web前端開發，頁面區域性滑動之iscroll框架

先看個簡單的，移動裝置上，橫向滑動內容塊的例子： <head> <style> body,ul,li { padding:10px; margin:0; } body { font-size:12px; -webkit-user-sel

PHP PDO+MySQL實現登入註冊頁面

connect.php——連線資料庫，以後要連資料庫直接include，不用再一寫一大堆 <?php header("Content-type: text/html;charset=utf-8"); $dbh = new PDO("mysql:hos

記錄第一個小專案,基於django的登入註冊頁面

教程來源：http://zmrenwu.com 專案是基於django自帶的auth模組來認證的，檢視AbstractUser模組原始碼，發現有username，firestname，last 和email，不夠用，所以我們繼承這個類， 加上一個nickname屬性 設定

SSH框架登入註冊頁面用struts的xml配置方式校驗遇到的問題及解決方法

SSH框架用struts的xml配置進行前臺驗證，驗證登入和註冊頁面遇到的問題及解決方式 一、首先新建struts前臺驗證的配置檔案 命名方式是：類名-validation.xml，我的是LoginAction類和RegisterAction類，所以我的

web前端技術講解之CSS中position的定位技術

使用position定位有四種方式，分別為absolute、relative、static、fixed，static是靜態定位，也為系統自動定位。下面主要分析其他三種定位方式的特點。 1. 絕對定位：position:absolute (1) 絕對定位是將元素依據已經定位（絕對、固定或

react專案實戰二 登入註冊頁面的完成

1、首先是新建專案，並引入相關依賴 新建專案參考部落格 在開始之前，推薦先學習一下redux的簡單使用 相關庫： npm install redux --save npm run eject 展示出所有配置 npm install express --sav

Android 登入註冊頁面遇到的一些問題方法-小白懂得太少

1.String ver =get_ver.getText().toString().trim() 其中toString().trim(),表示獲得物件的欄位的值，然後轉換成string 型別，並且去掉前後空白trim（）是去兩邊空格的方法。toString().trim()

WEB前端 -- 讀取下拉框中的text、value

varcheckText=$("#select_id").find("option:selected").text(); 獲取select 選中的 text :    $("#ddlregtype").find("option:selected").text(); 獲

SpringBoot（六）：攔截器--只允許進入登入註冊頁面，沒登入不允許檢視其它頁面

SpringBoot註冊登入(一)：User表的設計點選開啟連結SpringBoot註冊登入(二)：註冊---驗證碼kaptcha的實現點選開啟連結SpringBoot註冊登入(三)：註冊--驗證賬號密碼是否符合格式及後臺完成註冊功能點選開啟連結SpringBoot註冊登入(

Android Java Web實現登入註冊（二）——伺服器端

Eclipse新建Dynamic Web Project，新建index.html，執行看見沒有提示404錯誤的頁面即Tomcat伺服器部署成功。這是搭建Java Web環境時需要完成的工作。詳細內容請看點選開啟連結 涉及的檔案與專案結構：    一、Servlet類

Python中的%佔位符%s，%d%和%f等

Python中用%代表格式符，或者叫佔位符 表示格式化操作，將其轉化成相應的資料型別 例如： %s佔位：字串，採用str()的顯示。並將資料轉化為字串形式 string="hello" print（string=%s" % string）# %s列印時被替換

placeholder佔位符 和 feed喂資料

在說feeds操作之前，先講一下tf.placeholder(dtype, shape=None, name=None)，真正在feeds時 不必指定初始值，可在執行時，通過 Session.run 的函式的 feed_dict 引數指定； 引數： dtype：資料型別