Mobile Responsive Registration Form In Html Example

When you create a web page, you may want it to be displayed adaptable both on mobile devices 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.

  1. The below picture shows how the web page looks like in mobile device and desktop web browser when it does not use css3 extended property.
    Below is the mobile device web page without using the CSS3 property.
    render-html-form-web-page-do-not-use-css3-in-mobile-web-browser
    Below is the desktop PC web page without using the CSS3 property.
    html-registration-form-not-use-css3-in-desktop-web-browser
  2. To browse the above webpage from the mobile emulator, you should set up an HTTP web server such as tomcat and then copy the below source code to an Html file in the webserver.
  3. You can refer to the 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.

  1. When using CSS3 properties in Html, the web page will look like the below.
    Below is the mobile device web page after use CSS3 properties.
    html-form-use-css3-in-mobile-web-browser
    Below is the desktop PC web page after use CSS3 properties.

    html-registration-form-use-css3-in-desktop-web-browser
  2. Below is the Html 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>
0 0 votes
Article Rating
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x