Suggestions for enhancing my HTML form using CSS

My school assignment involves creating a webpage. Here are the initial design concepts I have come up with: Click here for image

This is what I have implemented so far: Click here for image What else do I need to add?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box1{
      box-sizing: content-box; width:300px; height:200px; padding:150px; border: 1px solid;
    

     </style>
</head>
<body>
   <div id="box1" margin>
        <form action="must.txt">
            First Name :<input type="text" name="fname"><br>
            Last Name : <input type="text" name="lname" ><br>
            Password : <input type="password" name="password" ><br>
            Email : <input type="email" name="email" ><Br>
            Birthday : <input type="date" name="Birthday" > <br>
            Gender : <input type="radio" name="Gender" value="Male">Male
                     <input type="radio" name="Gender" value="Female">Female
                    </form>
                </div>

Answer №1

I have taken care of some details. The rest is up to you to discover. Best of luck.

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box1{ 
    margin: 0;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);}
   </style>
</head>
<body>
   <div id="box1">
<fieldset style="padding:50px">
<legend>Register Form</legend>
     <form action="must.txt">
        First Name :<input type="text" name="fname"><br>
        Last Name : <input type="text" name="lname" ><br>
        Password : <input type="password" name="password" ><br>
        Email : <input type="email" name="email" ><br>
        Birthday : <input type="date" name="Birthday" > <br>
        Gender : <input type="radio" name="Gender" value="Male">Male
                 <input type="radio" name="Gender" value="Female">Female<br>
                <center><button type="submit" style="margin:5px">Submit</button><button onclick="ResetFields()">Reset</button></center> 
      </form>
</fieldset>
</div>
</body>

Answer №2

Secure your account with confirm password and email verification:

Verify Password :

<input type="password" name="verify_password" >

Verify Email :

<input type="email" name="verify_email" >

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript event array

I have a JavaScript array that looks like this: var fruits=['apple','orange','peach','strawberry','mango'] I would like to add an event to these elements that will retrieve varieties from my database. Fo ...

Tips for creating a unique parent tag and child tag with onclick functionality on a b-form-checkbox without repeating code

As I work on a li tag with various child elements, including a b-form-checkbox, I encountered an issue. I want the checkbox to function properly when clicked anywhere inside the li tag, including on the checkbox itself. However, when I click directly on th ...

What causes the element to remain visible despite the changes made to the v-show attribute?

<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p v-show="show&qu ...

Issue with implementation of Foundation's 6-column grid system

Attempting to initiate a basic project using foundation 6. Here is the simple HTML utilized: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible"&g ...

The functionality of the Javascript 3D carousel is experiencing issues when used in Internet Explorer

I have a client who needs a 3D carousel on their website. I came across this one that functions perfectly in Chrome and FF: http://codepen.io/dudleystorey/pen/kiajB HTML: <div id=carousel> <figure id=spinner> <img src=//demosthenes.info/as ...

Insert the picture into an HTML document and retrieve the image file location

I successfully used <input type="file" accept="image/*"> to upload an image and then applied base64 encoding of the image in the onload callback function of a FileReader instance. However, I encountered a problem when trying to assign this base64 enc ...

The images are not properly aligned with the carousel in Bootstrap 4

I am having an issue with my carousel displaying zoomed-in images. Here is the HTML code I am using: <header> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> ...

Having spaces between elements is necessary due to the insertion of a new line and the use

I am working on an HTML page where I have the following code snippet: <div id="div"></div> My task is to dynamically add two elements within this div using JavaScript. The issue arises when adding a and button elements. a1 = document.createEl ...

Organize your items vertically using jQuery Mobile's list feature

I am currently working on a mini chat application. The messages in the list are appearing side by side and I would like them to be displayed one below the other. Is there a way to adjust the CSS or add classes to achieve this? <div style="height:100% ...

What are some ways to increase the height of gradient colors in TailwindCSS?

I have successfully implemented gradient colors using the following code: <div class="bg-gradient-to-t from-red-400 via-white to-red-400"></div>` Now, I am unsure how to limit the height of these gradients in CSS. Is there a way to ...

Hovering over a link causes malfunction in CSS drop-down menu

I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown to appear when you hover over .droptoggle. I'm including the entire page because I can't figure out what's wr ...

Streamlined Navigation Bar Design for Websites

Struggling with aligning all the navbar options in a single row. Here is an example: https://jsfiddle.net/knyx2u8h/ ` Example Domain <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; char ...

The expected value for the challenge did not align with the response provided, it should have been '1480587314'

I am in the process of creating a web app for Facebook. I have set up an index.php file (for basic testing purposes) and specified the site's URL as the canvas callback URL where I registered the app on http://developers.facebook.com. However, when I ...

How should image dimensions for a background image be properly specified in CSS?

In my CSS file, I have defined styles for mini icons like this: /* Total counts - mini icons */ span.count-facebook { background: #fff url(../images/mini-icons/facebook.png) no-repeat 1px center; } span.count-plusone { background: #fff url(../images/mini- ...

What is the best way to convert a repetitive string into a reusable function?

I am currently retrieving data from an API and I want to display it on my website in a more user-friendly manner. The challenge I'm facing is that the number of variables I need is constantly changing, along with their corresponding values. So, I&apos ...

Can PHP be used to dynamically load a different stylesheet on a webpage?

Currently in the process of developing a mobile version of my website, I have determined that implementing an alternate stylesheet would be the most effective method to ensure compatibility with mobile devices. I am considering using a PHP script for use ...

How can I effectively vertically position a button in Bootstrap 5 without compromising its functionality?

I'm attempting to reposition the sign-up buttons for Google, Apple, and email below where it says "join," but they stubbornly refuse to budge even when I try to force them with CSS. https://i.sstatic.net/74LQk.jpgCSS .homepage_topRight_Buttons{ ...

Storing Documents on Your Device

I've been working on a project to create a web page that provides links to online PDF files. When you click on these links, the file should be saved locally and its name/path added to local storage. I then aim to display all the saved files by iterati ...

Form for sending an AJAX request

Take a look at my website and the corresponding source code. You will find a "Form" on the page. Once a user submits the form, the server responds using the file "submit.php". This functionality can be tested online. I am attempting to retrieve this serve ...

Gather information from "div" tag with the class attribute using Python

I am looking to extract specific financial data (referred to as the Key data) that is housed within <div> </div> tags. I then aim to consolidate this extracted information into an excel sheet which already contains additional harvested data. Th ...