Mobile Responsive Registration Form In Html Example

When you create a web page, of course you want it to be displayed adaptable both on mobile device and desktop PC. This goal can be achieved with CSS3 extension properties. This example will just tell you how to implement that goal with a user account registration html form.

1. Html Form Do Not Use CSS3 Extension Property.

render html form web page do not use css3 in mobile web browser

html registration form not use css3 in desktop web browser

Above picture shows how the web page looks like in mobile device and desktop web browser when it do not use css3 extended property.

To browse above webpage from mobile emulator, you should setup a http web server such as tomcat and then copy below source code to a html file in the web server. You can refer to article Responsive Mobile Ready WebPage Using ViewPort Meta Tag Example and How To Connect To A Http Server Running In Android Emulator From PC Vice Versa to learn more.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; user-scalable=1;" />
    <title>Mobile Responsive Form Example</title>
</head>
<body>

<h3>User Registration</h3>
<form>
    <label>User Name :</label><br/><br/>
    <input type="text" id="userName" /><br/>
    <label>Password :</label><br/>
    <input type="password" id="password"/><br/>
    <label>Email :</label><br/>
    <input type="text" id="email"/><br/>
    <label>Phone Number :</label><br/>
    <input type="text" id="phoneNumber"/><br/>
    <label>Notes :</label><br/>
    <textarea id="notes" rows="6"></textarea><br/>
    <button>Submit</button>
    </div>
</form>

</body>
</html>

2. Html Registration Form Use CSS3.

html form use css3 in mobile web browser

html registration form use css3 in desktop web browser

When use CSS3 properties in html, the web page will looks like above. Please note the red line in below source code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; user-scalable=1;" />
    <title>Mobile Responsive Form Example</title>
  
    <style type="text/css">

        body {
            font-family: Arial;
            font-size: larger;
            margin: 2px;
            min-height: 600px;
        }

        form div {
            padding: 6px;
            margin: 5px;
        }

        form div div {
            margin: 3px;
            padding: 4px;
            /* Specify form > div > div border corner radius. */
            -webkit-border-radius: 5px;
            border: 1px solid #666666;
        }

        input, textarea {
            border: 0;
            -webkit-appearance: none;
            width: 99%; }

        button {
            border: 1px dotted white;
            /* Specify button text color. */
            color: #0000ff;
            /* Specify button background color as linear gradient from left top to right bottom. */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0.0,
            #FF9900), color-stop(1.0, #AAAAAA));
            /* Specify button border corner radius. */
            -webkit-border-radius: 6px;
            /* Specify the button shadow start x, y axis value and shadow corner radius and shadow color. */
            -webkit-box-shadow: 10px 10px 5px #00ff00;
            width: 100%;
            padding: 8px;
        }


        h3 {
            /* Specify the h3 tag background as linear gradient from top to bottom. */
            background: -webkit-gradient(linear, right top, right bottom, color-stop(0.0,
            #666666), color-stop(0.5, #3A3A3A), color-stop(0.5, #222222), color-stop(1.0, #000000));
            /* Specify only the bottom left and bottom right corner radius. */
            -webkit-border-bottom-left-radius: 6px;
            -webkit-border-bottom-right-radius: 6px;
            /* Specify h3 tag shadow. */
            -webkit-box-shadow: 0 3px 1px #BBBBBB;
            font-size: 1.2em;
            color: white;
            padding: 10px;
            margin: 6px;
            text-align: center;
        }

    </style>
</head>
<body>

<h3>User Registration</h3>
<form>
    <div>

        <div>
            <input type="text" id="userName" placeholder="User Name"/>
        </div>

        <div>
            <input type="password" id="password" placeholder="Password"/>
        </div>

        <div>
            <input type="text" id="email" placeholder="Email"/>
        </div>

        <div>
            <input type="text" id="phoneNumber" placeholder="Phone Number"/>
        </div>

        <div>
            <textarea id="notes" rows="6" placeholder="Notes"></textarea>
        </div>

        <button>Submit</button>
    </div>
</form>

</body>
</html>
(Visited 162 times, 2 visits today)
READ :   Android Contacts Fields, Data Table Columns And Data Mimetype Explain

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.