Skip to main content

Form Elements

Form Elements | HTML: Form elements are using to get the data from user based on type data type. 
List of Form Elements:
  1. Input
  2. Select
  3. Text Area
  4. Button
  5. Fieldset and Legend
Input Types List:
  1. Email
  2. Phone
  3. Password
  4. Check Box
  5. File
  6. Date
  7. Reset
Input Attributes List:
  1. Value
  2. Read only
  3. Disabled
  4. Size
  5. Min, Max and Maxlength
  6. Auto focus
  7. Auto Complete
  8. Place Holder
  9. Height and Width
Form Attribute List:
  1. Form
  2. Form Action
  3. Form Method
  4. Form Target
  5. Form Novalidate
Here is formelements.html:

  1. <!DOCTYPE html>
  2.   <html lang="en" dir="ltr">
  3.     <head>
  4.       <meta charset="utf-8">
  5.       <link rel="stylesheet" href="css/stylesheet.css">
  6.       <title>Form Elements</title>
  7.     </head>
  8.     <body>
  9.       <form class="form" action="submit.html" method="post" id="form1">
  10.         <fieldset>
  11.           <legend>Personal Info : </legend>
  12.         <label for="name">Name : </label><br>
  13.         <input type="text" name="name" id="name"
  14.         value="Nataraja Murthy" size="20" disabled readonly required><br><br>
  15.         <label for="email">Email :</label><br>
  16.         <input type="email" name="email" id="email" autofocus
  17.         autocomplete="on" placeholder="abcde@gmail.com" required><br><br>
  18.         <label for="phone">Phone Number :</label><br>
  19.         <input type="tel" name="phone" id="phone"
  20.         pattern="[0-9]{10}" maxlength="10" required><br><br>
  21.         <label for="password">Password :</label><br>
  22.         <input type="password" name="password" id="password" required><br><br>
  23.         <label for="vehicle">Which vehicle you have ?</label>
  24.         <input type="checkbox" name="bike" id="bike">
  25.         <label for="bike">Bike</label>
  26.         <input type="checkbox" name="car" id="car">
  27.         <label for="car">Car</label><br><br>
  28.         <label for="picupload">Choose your picture :</label><br><br>
  29.         <input type="file" name="picupload" id="picupload"><br><br>
  30.         <label for="birthdate">Date of Birth :</label>
  31.         <input type="date" name="birthdate" id="birthdate"
  32.         min="1990-01-01" max="2000-01-01"><br><br>
  33.         <label for="gender">Choose your gender :</label><br><br>
  34.         <input type="radio" name="gender" id="male">
  35.         <label for="male">Male</label>
  36.         <input type="radio" name="gender" id="female">
  37.         <label for="female">Female</label>
  38.         <input type="radio" name="gender" id="other">
  39.         <label for="other">Other</label><br><br>
  40.         <label for="fruits">Choose Fruits : </label>
  41.         <select class="select" name="fruits" size="1" multiple>
  42.           <option value="Mango">Mango</option>
  43.           <option value="Banana">Banana</option>
  44.           <option value="Apple">Apple</option>
  45.           <option value="Orange" selected>Orange</option>
  46.         </select><br><br>
  47.         <label for="address">Address : </label><br>
  48.         <textarea id="address" rows="5" cols="25"></textarea><br><br>
  49.         <label for="feedback">Feedback : </label><br>
  50.         <input list="feedback">
  51.         <datalist id="feedback">
  52.           <option value="excellent"></option>
  53.           <option value="good"></option>
  54.           <option value="poor"></option>
  55.         </datalist><br><br>
  56.         <input type="image" src="images/submit.png" alt="submit as User"
  57.         formnovalidate formtarget="_self" id="submit" height="30" width="90">
  58.         <input type="image" src="images/reset.png" alt="reset" id="reset" value="Reset">
  59.         </fieldset>
  60.       </form><br>
  61.       <input type="image" src="images/submit2.png" alt="submit as Admin"
  62.       formaction="submit2.html" form="form1">
  63.     </body>
  64.   </html>

Web view of Html:


Here is the Playlist:

Labels: