How to Make a Registration form by using HTML and CSS

Determine the information you need to collect: First, determine the information you need from the users who will complete the registration form. This usually includes basic details such as name, email address, password, and possibly additional information such as an address, phone number, or age.

Choose a form-building platform – There are many form-building platforms available online, such as Google Forms, Typeform, Wufo, and JotForms. Choose the one that suits your needs.
Create a new form: Once you've chosen your platform, create a new form and add the fields you want. Most form builders will let you choose from different field types, such as text input, dropdowns, checkboxes, and radio buttons.
Customize the form - Customize the form to match your brand and make sure it's easy to use. Consider adding clear instructions and clearly labeling fields.
Test the form: Before making your form public, test it thoroughly to ensure it works properly and you can collect all the information you need.
Publish the form - Once you're happy with the form, publish it on your website or share the link with users who need to sign up. Consider using a secure connection (HTTPS) to protect user data.
Monitor Responses - Keep track of the responses you receive and ensure any necessary follow-up is done in a timely manner.

By Using HTML:

<body>
    <div class="header">
        <nav class="navigation">
            <h2 class="logo">Chishtiya <span>Services</span></h2>
            <ul>
                <li><a href="#"> Home</a></li>
                <li><a href="#"> About</a></li>
                <li><a href="#"> Contect us</a></li>
                <li><a href="#"> Services</a></li>
                <li><a href="#"> Projects</a></li>
            </ul>
            <button>Subscribe</button>
        </nav>
    </div>
    <div class="container">
        <div class="content">
            <h1>Rejistration form</h1>
            <form action="">
                <div class="name">
                    <label for="">First Name</label><input type="text">
                    <label for="">Last Name <input type="text"></label>
                </div>
                <div class="email">
                    <label for="">Email</label><input type="email" placeholder="put email">
                    <label for="">select-job</label>
                    <select name="" id="">
                        <option value="">select-job</option>
                        <option value="coder">coder</option>
                        <option value="developer">developer</option>
                        <option value="foront-enddeveloper">foront-enddeveloper</option>
                        <option value="backend-developer">backend-developer</option>
                    </select>
                </div>
                <div class="password">
                    <label for="">Password</label><input type="password" placeholder="cearly put">
                    <label for="">Pin-code</label><input type="password" placeholder="remember it">
                </div>
                <div class="city">
                    <span> <label for="">City</label><input class="a" type="text"></span>
                    <span> <label for="date">date</label>
                        <input value="2023-10-10" id="date" name="date"  tsype="date">
                    </span>
                </div>
                <div class="form-control">
                    <label for="Adress ">Adress</label>
                    
                    <label for="">Upload your CV</label><input type="file">
                </div>
                <div class="gender">
                    <input type="radio" name="gender"><label for="">Male</label>
                    <input type="radio" name="gender"><label for="">Fe-male</label>
                </div>
                <div class="check">
                    <input type="checkbox"><label for="">I accept the terms and conditions</label>
                </div>
                <div class="rejister">
                    <button class="rejister">Rejister</button>
                </div>
            </form>
        </div>
    </div>

</body>

By Using CSS:

body {
    background-color: #f2f2f2;
    text-align: center;

}

h1 {
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    margin-left: 50px;
}

.container {
    text-align: center;
    background-color: white;
    max-width: 500px;
    height: 700px;
    margin: 40px auto;
    padding: 10px;
    color: steelblue;
    font-weight: bold;
    font-size: 15px;
    /* display: flex;
    flex-wrap: wrap; */
    border-top: 5px solid blue;
    box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5);
}
.name {
    position: relative;
    margin: 30px auto;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
}

.email {
    position: relative;
    margin: 30px auto;
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
}

.password {
    position: relative;
    margin: 20px auto;
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
}

.city {
    position: relative;
    margin: 30px auto;
    margin-left: 20px;
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
}

.form-control {
    position: relative;
    margin: 30px auto;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    margin-left: 40px;
    /* margin-top: ;   */
}

.gender {
    position: relative;
    margin: 30px auto;
    margin-top: 40px;
    margin-left: 40px;
    display: flex;
    /* justify-content: space-between;   */
}

.check {
    position: relative;
    margin: 40px auto;
    margin-left: 35px;
    display: flex;
    /* justify-content: center; */
}

.rejister {
    position: relative;
    max-width: 400px;
    height: 45px;
    background-color: blue;
    text-align: center;
    margin-left: 40px;
    /* margin-top: 40px; */
    color: white;
    border: none;
    font-size: 30px;
    font-weight: bold;
    border-radius: 5px;
}

.rejister:hover {
    background-color: rgb(71, 177, 98);
    /* border: 2px solid red; */
    color: black;
    cursor: pointer;
   transition: 2s;
}
.navigation{
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    padding-top:40px ;
    padding-right: 10%;
    padding-left: 10%;
    background-color: rgb(140, 24, 152);
    justify-content: space-between;
}
.logo{
    font-style: italic;
    font-weight: bold;
    color: white;
}
.logo span{
    color: rgb(159, 134, 6);
}
.navigation ul li{
    position: relative;
    display: inline-block;
    list-style-type: none;
    padding: 10px 20px;

}
.navigation ul li a{
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.navigation ul li a:hover{
    background-color:blue;
    font-weight: bolder;
    margin: 10px;
    padding: 10px 10px;
    /* background-color: rgb(16, 142, 164); */
    transition: 1s;
    color: black;
}
button{
    position: relative;
    border: none;
    background-color: navy;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding: 12px 30px;
    transition: 2s;
    margin-bottom: 5px;
}
button:hover{
    margin-bottom: 5px;
    transform: scale(1.3);
    cursor: pointer;
}
</style>

Use this code in VS Code or DIV and Try it... Enjoy this Tutorial😋

Visit the site for more information...

Breaking

Home Top Ad

Post Top Ad

Saturday 1 April 2023

Project 2: How to Make Registration form by using HTML and CSS

How to Make a Registration form by using HTML and CSS

By Using HTML:

By Using CSS:

No comments:

Post a Comment

Post Bottom Ad

Author Details

Facebook

Recent

Popular

Comments

Archive

Sponsor

Technology

Tags

Pages

Tags

Connect With us

Recent News

About Me

Contact Form

Categories

Breaking

Home Top Ad

Post Top Ad

Saturday 1 April 2023

Project 2: How to Make Registration form by using HTML and CSS

How to Make a Registration form by using HTML and CSS

By Using HTML:

By Using CSS:

No comments:

Post a Comment

Post Bottom Ad

Author Details

Socialize

Facebook

Recent

Popular

Comments

Archive

Sponsor

Technology

Tags

Pages

Tags

Connect With us

Recent News

About Me

Contact Form

Categories