Created
November 5, 2023 13:46
-
-
Save clickCA/e6d3ce228655de107a4329a28f5b871b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Sign Up Form</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| text-align: center; | |
| } | |
| .form-container { | |
| width: 500px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| border: 1px solid #ccc; | |
| box-shadow: 0px 0px 5px #ccc; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-top: 10px; | |
| } | |
| input { | |
| width: 100%; | |
| padding: 5px; | |
| margin-top: 5px; | |
| } | |
| .radio-buttons { | |
| display: flex; | |
| margin-top: 10px; | |
| } | |
| .radio-buttons label { | |
| margin-right: 20px; | |
| } | |
| .radio-buttons input { | |
| margin-right: 5px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background-color: #0069d9; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #007bff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="form-container"> | |
| <h1>Sign Up for Free</h1> | |
| <form> | |
| <label for="firstName">First Name:</label> | |
| <input type="text" id="firstName" name="firstName"> | |
| <br> | |
| <label for="lastName">Last Name:</label> | |
| <input type="text" id="lastName" name="lastName"> | |
| <br> | |
| <label for="email">Email Address:</label> | |
| <input type="email" id="email" name="email"> | |
| <br> | |
| <label for="password">Password:</label> | |
| <input type="password" id="password" name="password"> | |
| <br> | |
| <label for="confirmPassword">Confirm Password:</label> | |
| <input type="password" id="confirmPassword" name="confirmPassword"> | |
| <br> | |
| <div class="radio-buttons"> | |
| <label for="gender">Gender:</label> | |
| <label for="genderMale">Male</label> | |
| <input type="radio" id="genderMale" name="gender" value="male"> | |
| <label for="genderFemale">Female</label> | |
| <input type="radio" id="genderFemale" name="gender" value="female"> | |
| </div> | |
| <br> | |
| <label for="phone">Phone Number:</label> | |
| <input type="tel" id="phone" name="phone"> | |
| <br> | |
| <label for="birthDate">Date of Birth:</label> | |
| <input type="date" id="birthDate" name="birthDate"> | |
| <br> | |
| <button type="submit">Sign Up</button> | |
| <br> | |
| <a href="#">Already have an account? Log in.</a> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment