HTML user registration page settings source code

insert image description here

Design the web page shown above:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

            form{
                width: 800px;
                height: 700px;
                border: 1px solid red;
                margin: auto;
                background: url(images/tree.jpg) no-repeat -40px 300px;
            }

            form h3{
                margin-left: 200px;
            }

            p{
                margin-left: 200px;
            }

            hr{
                margin-left: 200px;
            }

             .a1{
                 margin-left: 85px;
             }

             .a2{
                margin-left: 110px;
            }


            input,
            textarea
            {
            background: url(images/attention.png) no-repeat right;
            }

            button{
                margin-left: 200px;
                background: rgb(81, 187, 125);
                color: white;
            }

            span#as:hover input{
                width: 300px;
                height: 40px;
            }

           
    </style>

</head>

<body>
        

        <form action="">
            <h3>User Registration:</h3>

            <hr>
            
            <p>User Nickname: <span class="a1" id="as"><input type="text" required placeholder autofocus></span> <hr></p>

            <p>Registration email: <span class="a1" id="as"><input type="email" required placeholder="[email protected]"></span><hr></p>

            <p>Password: <span class="a2" id="as"><input type="password" required placeholder></span><hr></p>

            <p>Gender:<span class="a2">Male<input type="radio" name="1" checked>
                Female<input type="radio" name="1"> </span><hr>
             </p>

             <p>Age: <span class="a2" id="as"><input type="number" name="number1" required placeholder></span><hr></p>

             <p>Hobbies and Interests:
                Football<input type="checkbox" name="1">
                Basketball<input type="checkbox" name="1">
                Swimming<input type="checkbox" name="1">
                Singing<input type="checkbox" name="1">
                Running<input type="checkbox" name="1">
                Yoga<input type="checkbox" name="1">
             </span><hr></p>

            <p>Self-introduction: <span class="a1"><textarea name="abcde" cols="30" rows="10" required placeholder>Please enter your message</textarea></span><hr> </p>

            <button type=submit>Register now</button>

             
            <div></div>



        </form>

</body>

</html>

This is the end of this article about the source code of HTML user registration page settings. For more relevant html user registration page content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Ideas for creating wave effects with CSS

>>: Common naming rules for CSS classes and ids