HTML user registration page settings source code

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

Recommend

Six ways to reduce the size of Docker images

Since I started working on Vulhub in 2017, I have...

Detailed description of mysql replace into usage

The replace statement is generally similar to ins...

Analysis of CocosCreator's new resource management system

Table of contents 1. Resources and Construction 1...

JavaScript exquisite snake implementation process

Table of contents 1. Create HTML structure 2. Cre...

A brief discussion on the pitfalls of react useEffect closure

Problem code Look at a closure problem code cause...

Vue interpretation of responsive principle source code analysis

Table of contents initialization initState() init...

How to quickly build an LNMP environment with Docker (latest)

Preface Tip: Here you can add the approximate con...

Detailed explanation of Linux rpm and yum commands and usage

RPM package management A packaging and installati...

Three ways to prevent MySQL from inserting duplicate data

Create a new table CREATE TABLE `person` ( `id` i...

How to find out uncommitted transaction information in MySQL

A while ago, I wrote a blog post titled "Can...

How to create a web wireframe using Photoshop

This post introduces a set of free Photoshop wire...