Forms Theory: Most used properties and input/container types in html5

Most used properties and input/container types in html5

Forms

Types of forms

•                 Registration Forms

 •                 Login Forms

 •                 Contact Us Forms

 •                 Data Forms

 •                 Chat Forms

Form Fields

Input Types

• Text {to input all types of text(no. s, alphabets, integers)}
•  Email (to prompt user to add @ in field if s/he didnt)
•  Password (to hide text in the field)
• File (to add the upload file button)
• Radio (for any type of selection eg. gender. For one selection keep the names of all inputs same otherwise all of the options can be selected. If  you
• Mention specific value in this input, it will show that "value" instead of "name"=on)
• Checkbox (for multi-selections, names must always be different to prevent problems from serverside, values must be kept different as well. )
• Number {doesn't accept texts except e (exponential), accepts numbers)
•   Date (to show field with dd/mm/yyyy)
• Range (shows a field which is somewhat similar to a horizontal volume bar to the user, value="90" to change the default spot of the bar to start from 90% instead of  50%)
• Color (for giving color selection field to user)
• Submit (to submit values)
• Reset (resets all the data in the form)
•  Url (for a field box that accepts urls in protocols only i.e https)
• Tel (allows signs usually needed for typing phone numbers i.e +, -)
• Time (to allow a field which can help set time in 12hr format e.g 09:55   AM)
• Month (to allow a field which can help select month and year e.g          month/year format)
• Week (to allow a field which can help select week and year e.g week    number/year format)
• Hidden (hides the whole field from the front end, it's data is sent and    shown in  the url)
• 
  

Container Types

• Label (container for labelling various field boxes)
• Fieldset (it shows a border/boundary --> container for legend)
• Legend ( shows a heading for fieldset border/ boundary)
• Textarea (shows a huge draggable box which can store data infinitely,           default  size ---> cols/rows are set e.g cols="10" rows="10")
•  Select (container for options)
• Option {allows different options to be shown in a drop down                      list(<option>Lahore
• </option><option>Faisalabad</ option><option>Peshawar </ option>          <option>Sahiwal </option>)
•  Datalist (similar to select--> option containers)

PROPERTIES

• Name (for naming any input)
• Type (to set the input type, default is always text)
• value ( for assigning different values to inputs and container types )
• Size (increases the area covered by the field in comparison to the size="" provided as long as it is greater than the default area, <!--can only be increased>)
• Maxlength (maxlength="5", will allow only 5 numbers/chars to be entered depending on the type of field box and it is independant of the size tag i.e the size of the field can be huge but inputs will still be limited)
•  Placeholder( shows a greyed out text in fieldboxes. If submit button is pressed, the placeholder value isn't sent to the server side )
• Readonly (data in this field cannot be changed/ edited and it is sent to the server side)
• Disabled ( has the same function as readonly, with an added change in background color i.e greyed out box. The data is sent but not shown in url which makes it secure to some extent as it can still be seen from front end)
• Required (the data cannot be sent until this field is filled)
•  Max /Min (to show range of numbers in type="numbers" etc)
• Steps (used with min/max mostly, changes the default step to required mostly used for wholesale fields etc)
• Autofocus ( used to suggest the user to fill some field first i.e selects a field.Mostly used for first field in the form and it can only be used on one fied)
• 
  

NOTE

•  If value is given in text field, it will show as predefined in the field box.
• * shown in label tag to tell the user that a field is required e.g email *
•   If u don't set an input type, it is set as text as default.
• property multiple="multiple" can be used in select tag to allow multiple options to be selected if needed.
• <!-- • <form></form>
•  <labels></labels>
•  eg. <input type="text" name="F">
•  <input type="submit" name="submit"
•  value="SUBMIT" (property inside value button for changing default)
•  type="email" (to prompt user to give text with @)
•   type="password" (to hide text in the field)
•    type="date" (to show field in format mm/dd/yyyy) -->