Forms and Inputs

<form> is a container tag used for collecting data using the webpage.   Following tags are mainly used inside the form tag to collect data.  Note that form elements only collect data, stored in a database or further logical actions are taken by the server and does not cover by HTML.  HTML just pass data to url mentioned in action attributes using the method mentioned in method attributes. 

  • input
  • button
  • form

Accepted attributes by form tag

  • method: type of browser data submitting (get, post, patch, delete etc)
  • name: name of the form
  • target: just like anchor text where to display content after submitting the form 
  • enctype: MIME type of data submitted

Input

Input helps in creating an interactive component to collect data from the user with basic validation and category of data.  The input accepts attributes "type"  to categories and collects various types of data. 

Value acceptable by the type attribute

  • text: collect plain short text
  • number: collects the only number
  • password: collect a password and mask it for security
  • email: collects the valid email address
  • url: collects URL only
  • tel: collects telephone number
  • radio: It is a radio button allows the user to select an only single value
  • range: provides visual similar to drag to adjust the value 
  • file: to collect the file from a user
  • checkbox: allow the user to provide multiple values for the same files
  • date: collect date from the user
  • hidden: hidden input with a predefined value 
  • submit: submit the form to the server for further process 

Input tag also accepts "value" attributes that holds value entered or predefined. To differentiate between submitted value " name " attribute is used so data is send to targeted location with name as data key and value as a value to that key. "Placeholder "e; is providing hint or description about to input.

Select

This element provides a drop-down list. This element tag is a container type tag and contains <option> tag inside <select> tag to provide list of options. Each option contains a single value, you need to provide multiple options to allow user more select choice.  Option tag has an attribute value to hold the value of that option which is not visible to the user, between option opening and closing tag you can pass the user-friendly name of the option, which is visible to the user.  By passing "multiple" attribute with the select tag you can allow the user to submit more than one value for the same field once. 

Textarea

As per its name, this is a multiline area text field. Helpful for collecting large text or texts. This is a paired tag, value is collected between the opening and the closing tag of textarea. This element collects the visible number of lines in "rows" and width of text area using "cols". 

Label

This attribute render as a caption for an item. It is a paired tag.