Question

I would like to create a registration form like Gmail.

I know how to create a basic form with some basic php coding for validate and connecting it to the MySQL database. But I want to have the Gmail-like username features where users can register for an email account without filling in "@domain.com".

Here is an image: https://flic.kr/p/nxxUqt

Screenshot

Basically, users do not have to type the "@gmail.com" when registering but the "@gmail.com" will be INSERT into the MySQL database.

HERE IS MY CODING

<?php
    error_reporting(E_ALL ^ E_DEPRECATED ^ E_NOTICE ^ E_WARNING);
    $submit = $_POST['submit'];
    //form data
    $name = strip_tags($_POST['name']);
    $name2 = strip_tags($_POST['name2']);
    $username = strip_tags($_POST['username']);
    $email = strip_tags($_POST['email']);
    $password = strip_tags($_POST['password']);
    $password2 = strip_tags($_POST['password2']);
    $email2 = strip_tags($_POST['email2']);
    $address = strip_tags($_POST['address']);
    $address2 = strip_tags($_POST['address2']);
    $address3 = strip_tags($_POST['address3']);
    $address4 = strip_tags($_POST['address4']);
    $error = array();
    if ($submit) {
        //open database
        $connect = mysql_connect("localhost", "root", "") or die("Connection Error");
        //select database
        mysql_select_db("logindb") or die("Selection Error");
        //namecheck
        $namecheck = mysql_query("SELECT * FROM users WHERE username='{$username}' OR email='{$email}'");
        $count = mysql_num_rows($namecheck);
        if ($count!=0) {
            $error[] = "<div style='border:thin solid red'><span style='color:red'><b>ID or Display Name already taken</b></span></div>";
        }
        //check for existance
        if($name&&$name2&&$username&&$email&&$password&&$password2&&$email2&&$address&&$address2&&$address3&&$address4) {
            //encrypt password
            $password = md5 ($password);
            $password2 = md5 ($password2);
            if($_POST['password'] != $_POST['password2']) {
                $error[] = "<div style='border:thin solid red'><span style='color:red'>Password does not match</span></div>";
            }
            if(isset($error)&&!empty($error)) {
                implode($error);
            }
            else
            {
                //Registering to database
                $queryreg = mysql_query("INSERT INTO users VALUES ('','$name','$name2','$username','$email','$password','$password2','$email2','$address','$address2','$address3','$address4')");
                die ("<p>You have been registered! <br><a href='Login.php'>Click here to return to Login</a></p>");     
            }
        }
    }
    ?>

hi guys thanks for helping out now i have validation issues, when i want to validate my username the email validation come out together with the username ones HERE IS MY VALIDATION CODING

    <?php
error_reporting(E_ALL ^ E_WARNING ^ E_NOTICE ^ E_DEPRECATED);
$connect = mysql_connect("localhost", "root", "");
mysql_select_db("logindb");
$username = mysql_real_escape_string($_POST['username']);
$email = mysql_real_escape_string($_POST['email'].='@domain.com');
$password = mysql_real_escape_string($_POST['password']);
$password2 = mysql_real_escape_string($_POST['password2']);
$query = mysql_query("SELECT * FROM users WHERE username='{$username}' OR email='{$email}'");
$check = mysql_num_rows($query);
if($username==NULL) {
    echo "";
}
else
{
    if(strlen($username)<5) {
        echo "<span style='color:red'>Please enter 5 to 25 characters</span>";
    }
    else
    {
        if($check==0) {
        }
        else
        {
            if($check==1) {
                echo "<span style='color:red'>Display Name taken. Try another?</span>";
            }
        }
    }
}
if($email==NULL) {
    echo "";
}
else
{
    if(strlen($email)<5||strlen($email)>30) {
        echo "Please enter 5 to 30 characters";
    }
    else
    {
        if($check==0) {
        }
        else
        {
            if($check==1) {
            echo "Email Taken";
            }
        }
    }
}
if($password==NULL) {
    echo "";
}
else
{
    if(strlen($password)<6) {
        echo "<ul><li><span style='color:red'>Please enter at least 6 characters</span></li>";
    }
    if(!preg_match("#[A-Z]+#",$password)) {
        echo "<li><span style='color:red'>Please enter at least 1 upper case characters</span></li>";
    }
    if(!preg_match("#[0-9]+#",$password)) {
        echo "<li><span style='color:red'>Please enter at least 1 number</span></li>";
    }
    if(!preg_match("#[\W]+#",$password)) {
        echo "<li><span style='color:red'>Please enter at least 1 symbol</span></li></ul>";
    }
}
?>
Was it helpful?

Solution

I suggest you to encapsulate your input control inside a container (e.g. a span). Inside this span you also add another element (e.g. anorther span) with absolute positioning.

Don't forget to add padding to your input so that when users write their usernames, then usernames does not overlap the @domain stuff.

So my HTML is:

<span class="placeholder"><label>@domain</label><input type="text" name="username"/></span>

while my CSS is:

 .placeholder {
     position:relative;
 }
 .placeholder label{
     position:absolute;
     right:0;
     margin-right:0.4em;
     color:#aaa;
 }
 .placeholder input{
     padding-right:5em;
 }

Here is a working example: http://jsfiddle.net/Vjt6E/


Then in your PHP code, you must add this value.

So, if your sending your data through a POST method you add at the beggining of your PHP code:

<?php
    $_POST['username'].='@domain'

... rest of your code here ...

If your are sending using a GET request then do:

<?php
    $_GET['username'].='@domain'

... rest of your code here ...
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top