HTML Code to display your personal information

Write an HTML program to design a form that should allow entering your personal data

Below is the code for an HTML form that allows entering your personal details. The form takes input such as your First name, Last name, Email Id, Contact Number, Address, etc.

HTML Code:

<!DOCTYPE html>
   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
      <title>Personal Data</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
   </head>
   <body>
       <form>
           <div class="container">
            <div class="row pt-4">
                <div class="col-md-6">
                    <label for="firstname">First name:</label>
                    <input type="text" class="form-control" placeholder="Enter your first name" required>
                </div>
                <div class="col-md">
                    <label for="lastname">Last name:</label>
                    <input type="text" class="form-control" placeholder="Enter your last name" required>
                </div>
            </div>
            <div class="row pt-2">
                <div class="col-md-6">
                    <label for="email">Email Id:</label>
                    <input type="email" class="form-control" placeholder="Enter your email address" required>
                </div>
                <div class="col-md-6">
                    <label for="tel">Tel:</label>
                    <input type="tel" class="form-control" placeholder="Enter your phone number" required>
                </div>
            </div>
            <div class="row pt-2">
                <div class="col-md-6">
                    <label for="state">State:</label>
                    <input type="text" class="form-control" placeholder="E.g: Maharashtra" required>
                </div>
               <div class="col-md-6">
                   <label for="gender">Gender:</label><br>
                   <input type="radio" name="gender"> Male
                   <input type="radio" name="gender"> Female
                   <input type="radio" name="gender"> Prefer not to say
               </div>
            </div>
            <div class="row pt-2">
               <div class="col-12">
                   <label for="addrline1">Address Line1:</label>
                   <input type="text" class="form-control" placeholder="Enter your address" required>
               </div>
            </div>
            <div class="row pt-2">
                <div class="col-12">
                    <label for="addrline2">Address Line2:</label>
                    <input type="text" class="form-control" placeholder="">
                </div>
             </div>
             <div class="row pt-4 float-right">
                <button type="submit" class="btn btn-primary">Submit</button>
             </div>
           </div>

       </form>
   </body>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</html>
The form is a responsive form, meaning you can view it on both Web and Mobile phone properly without any overlapping of text. And the form is using Bootstrap4 for its styling purpose.

Bootstrap Code:

CSS Link
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
Output:
Web View

FormWebView

Mobile View:

FormMobView

Also read: 
How to create a contact form in HTML & CSS
Types of Denial of Service(DoS) Attacks
Different types of security breaches?

Leave a Comment

Your email address will not be published. Required fields are marked *