HTML Forms & Inputs Tags with their Attributes.

Forms & Inputs Tags with Attributes:

<form> Defines an HTML form for user input. Supports global and  event attributes.

Attributes:

1. accept file_type Not supported in HTML5. Defines a comma-separated list of file types  that the server accepts (which can be submitted through the file upload)
2. accept-charset character_set Defines the character encodings that are to be used for the form submission
3. action URL Specifies where to send the form-data when a form is submitted
4. autocomplete on off Specifies whether a form should have autocomplete on or off
5. enctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
6. method get post Specifies the HTTP method to use when sending form-data
7. name text Specifies the name of a form
8. novalidate novalidate Defines the form that should not be validated when submitted
9. target _blank _self _parent _top States that where to display the response which is received after submitting the form

<input> Defines an input control. Supports global and  event attributes.

Attributes:

1. accept file_extension audio/* video/* image/* media_type Specifies the types of files that the server accepts (only for type="file")
2. align left right top middle bottom Not supported in HTML5. States the alignment of an image input (only for type="image")
3. alt text Specifies an alternate text for images (only for type="image")
4. autocomplete on off States whether an <input> tag should have autocomplete enabled 
5. autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads
6. checked checked States that an <input> element should be pre-selected when the page loads (only for type="checkbox" or type="radio")
7. dirname inputname.dir Specifies that the text direction will be submitted
8. disabled disabled Specifies that an <input> element should be disabled
9. form form_id Specifies one or more forms the <input> element belongs to
10. formaction URL States the URL of the file that will process the input control when the form is submitted (only for type="submit" and type="image")
11. formenctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image")
12. formmethod get post Defines the HTTP method for sending data to the action URL (only for type="submit" and type="image")
13. formnovalidate formnovalidate Defines that form elements should not be validated when submitted
14. formtarget _blank _self _parent _top framename Defines where to display the response that is received after submitting the form (only for type="submit" and type="image")
15. height pixels Specifies the height of an <input> element (only for type="image")
16. list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
17. max number date Specifies the maximum value for an <input> element
18. maxlength number Specifies the maximum number of characters allowed in an <input> element
19. min number date States a minimum value for an <input> tag
20. multiple multiple Specifies that a user can enter more than one value in an <input> element
21. name text Specifies the name of an <input> element
22. pattern regexp Specifies a regular expression that an <input> element's value is checked against
23. placeholder text Defines a short hint that describes the expected value of an <input> tag
24. readonly readonly Specifies that an input field is read-only
25. required required States that an input field must be filled out before submitting the form
26. size number States the width, in characters, of an <input> tag
27. src URL States the URL of the image to use as a submit button (only for type="image")
28. step number Specifies the legal number intervals for an input field
29. type button checkbox color date  datetime-local  email  file hidden image month number password radio range  reset search submit tel text time  url week States the type <input> tag to display
30. value text Specifies the value of an <input> element
31. width pixels Specifies the width of an <input> element (only for type="image")

<textarea> Defines a multiline input control (text area). Supports global and  event attributes.

Attributes:

1. autofocus autofocus Specifies that a text area should automatically get focus when the page loads
2. cols number Specifies the visible width of a text area
3. dirname textareaname.dir Specifies that the text direction of the textarea will be submitted
4. disabled disabled Specifies that a text area should be disabled
5. form form_id Specifies one or more forms the text area belongs to
6. maxlength number Specifies the maximum number of characters allowed in the text area
7. name text Specifies a name for a text area
8. placeholder text Specifies a short hint that describes the expected value of a text area
9. readonly readonly Specifies that a text area should be read-only
10. required required Specifies that a text area is required/must be filled out
11. rows number Specifies the visible number of lines in a text area
12. wrap hard soft States how the text in a text area is to be wrapped when submitted in a form

<button> Defines a clickable button. Supports global and  event attributes.

Attributes:

1. autofocus autofocus States that a button should automatically get focus when the page loads
2. disabled disabled Specifies that a button should be disabled
3. form form_id States that one or more forms the button belongs to
4. formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"
5. formenctype application/x-www-form-urlencoded multipart/form-data text/plain States how form-data should be encoded before sending it to a server. For type="submit"
6. formmethod get post Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
7. formnovalidate formnovalidate Defines that the form-data should not be validated on submission. Only for type="submit"
8. formtarget _blank _self _parent _top framename Specifies where to display the response after submitting the form. Only for type="submit"
9. name name Specifies a name for the button
10. type button reset submit Specifies the type of button
11. value text Specifies an initial value for the button

<select> Defines a drop-down list. Supports global and  event attributes.

Attributes:

1. autofocus autofocus Specifies that the drop-down list should automatically get focus when the page loads
2. disabled disabled States that a drop-down list should be disabled
3. form form_id Defines one or more forms the select field belongs to
4. multiple multiple States that multiple options can be selected at once
5. name name Defines a name for the drop-down list
6. required required States that the user is required to select a value before submitting the form
7. size number Defines the number of visible options in a drop-down list

<optgroup> Defines a group of related options in a drop-down list. Supports global and  event attributes.

Attributes:

1. disabled disabled Specifies that an option-group should be disabled
2. label text Defines a label for an option-group

<option> Defines an option in a drop-down list. Supports global and  event attributes.

Attributes:

1. disabled disabled Specifies that an option should be disabled
2. label text Specifies a shorter label for an option
3. selected selected Specifies that an option should be pre-selected when the page loads
4. value text Specifies the value to be sent to a server

<label> Defines a label for an <input> element. Supports global and  event attributes.

Attributes:

1. for element_id Specifies which form element a label is bound to
2. form form_id States that one or more forms the label belongs to

<fieldset> Groups related elements in a form. Supports global and  event attributes.

Attributes:

1. disabled disabled Defines that a group of related form elements should be disabled
2. form form_id Specifies one or more forms the fieldset belongs to
3. name text States a name for the fieldset

<legend> Defines a caption for a <fieldset> element. Supports global and  event attributes.

Attributes:

1. align top bottom left right Not supported in HTML5.Specifies the alignment of the caption

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation. Supports global and  event attributes.

Attributes:

1. for element_id States that the relationship between the result of the calculation, and the elements used in the calculation
2. form form_id States one or more forms to which the output element belongs to
3. name name Specifies a name for the output element

Sample Form code:   (Save sample form as formcode.html)

<html>
<body>
<form style="background-color:orange">
<fieldset>
<legend>
Admission Form
</legend>
  Enter your First Name:
  <input name="firstname" placeholder="First Name" type="text">
  <br><br>
   Enter your Last Name:
  <input name="firstname" placeholder="Last Name" type="text">
  <br><br>
   Enter your Date Of Birth:
  <input name="firstname" type="date">
  <br><br>
   Enter your Password:
  <input type="password" placeholder="password" >
  <br><br>
   Choose Your gender:
  <input type="radio" name="sex" value="male" > Male
  <input type="radio" name="sex" value="male" > Female
  <br><br>
  Cource<br>
  <input type="checkbox" name="cource" value="html" > HTML<br>
  <input type="checkbox" name="cource" value="html" > CSS<br>
  <input type="checkbox" name="cource" value="html" > BOOTSTRAP<br>
  <input type="checkbox" name="cource" value="html" > PHP
  <p>The select element defines a drop-down list:</p>
<br><br>
Address
<br>
<textarea rows="4" cols="50">

</textarea>
<br>
 
  Select Car
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>

  <input type="submit">
  <button type="button" onclick="alert ('Your Form Sumbit ')">Save</button>
  <button type="reset">Cancel</button>
  </fieldset>
</form>
</body>
</html>
<!--  Form Sample. Using Form & Input tags with their attributes-->

OUTPUT :