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

CSS sets the list style and creates the navigation menu implementation code

1. Set the list symbol list-style-type: attribute...

A brief analysis of the responsiveness principle and differences of Vue2.0/3.0

Preface Since vue3.0 was officially launched, man...

CocosCreator Getting Started Tutorial: Making Your First Game with TS

Table of contents premise TypeScript vs JavaScrip...

How to view the execution time of SQL statements in MySQL

Table of contents 1. Initial SQL Preparation 2. M...

Three ways to jump to a page by clicking a button tag in HTML

Method 1: Using the onclick event <input type=...

Simple usage example of vue recursive component

Preface I believe many students are already famil...

My CSS framework - base.css (reset browser default style)

Copy code The code is as follows: @charset "...

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

Table of contents 1. Synchronization Principle 2....

Vue+echarts realizes stacked bar chart

This article shares the specific code of Vue+echa...

mysql5.7.19 zip detailed installation process and configuration

MySQL v5.7.19 official version (32/64 bit install...

Vue virtual Dom to real Dom conversion

There is another tree structure Javascript object...

Example of how to reference environment variables in Docker Compose

In a project, you often need to use environment v...