Different input controls

• type="number"

  the following:

  is infact:
  1. using scroll bars or typing in the textbox.increasing or decreasing number input is as much as step attr value is set.
  2. first click on scroll bars will increase as much as min attr value the second is as much as min attr + step attr value.third click is as much as step attr + resulted value of step attr + min attr.
  3. steping with typing-in is the same as scrolling.typing deliver some ease.steping by 8 takes 4 clicks if step="2" min="1" for example.typing only 8 is faster.
  4. i can always expect will the result be valid or not when typing in the textbox.count how much min attr + step attr then start adding using scrolls or typing-in
• min="2" step="3" :

• type="range"

  range input is much more like a number input with different representation and semantic meaning.

  it looks as follows:

  speed:

step,min and max for range & number

step mission is to determine the stepping value.if it is integer or a decimal point number.hence, will decied if the user can provide decimal point numbers or not. min mission is to decide the minimum value.stepping will start from that value.it could be integer or a decimal point number.hence,whatever is min value.step will start increasing or conceding from that value max mission is to decied the maximum value.

• type="hidden"

  this widget is hidden.think of it as input box that users will never see and use.what is the point then?.hidden input element value attr is used to hold a value that will be used later.all this work is outside of the user experince or scope of service.below this line there is input element of type hidden:

  obvious that as a user i can not visualize any element above this line.however,using web dev tools i can toogle it.usual use case is to hold a address of data location in a database and refer back to it again when submiting again (good reason to be hidden as users do not need to know that).

• type="file"

  the user may want or asked to provide any type of file.file widget let him upload like so:

  upload your account logo(less than 1MB):

  multiple attr is used to allow multiple files upload.

  upload your album(less than 10MB):

  accept attr is used to determine the type of file sent to the server.the value could be a comma seperated list of file types.

• type="color"

  browsers and platforms that support color wheels to pick colors are infact internaly converting the selected color into it's hexadecimal notation.therefore html color input only accept color inputs from users in the form of hexadecimal notaion.in case of unrecognized input format such as using css color functions or any value other than hexadecimal notation of colors.browsers will default to "#000000" color wich is black.

  pick your fav color :

• type="checkbox"

  checkbox might look as follows:

  real madrid

  the checkbox has no value taken from the user.therefore there is no validation taking place.value attr is set and will be sent on submission along with name attr.user only decieds if it is checked to be sent or not.it is boolean.

  checked attr is used to have on of the multiple checkboxes to be selected by default.

  real madrid real madrid

• input="radio"

  radio technicaly is similar to checkbox with big semantic difference that radio input is used when we have multiple options and user can select only one.

• Dates and time

  • type="date"

    it looks as follows:

    Date of birth:

    attributes min,max and value are filled in with the form of yyyy-mm-dd.however date is displayed differently depending on the used browser or operating system-could.it could be displayed as yyyy-dd-mm or mm-dd-yyyy and so on.step attribute is used to navigate through dates.user might want to navigate dates throughout sundays only.therefore i need to set step to "7".

    browser support:

    is a bit a problem since some are not supporting date.however select form element is used to get date user inputs like so:
    Month January Febreuary March

    another soution form browsers that are not supporting date input and are fallicg back to text input is the use of pattern attr.validation is performed to make sure user input is in a form of yyyy-mm-dd.however users still can exchange mm with dd-in the end they are only numbers.infact date is a number input type with speacial treatments and this is noticed with the use of min,max and step attr

  • type="datetime-locale"

    if the browser has support for datetime-locale it will look as follows:

    choose your forum prefered time:

    not supported on chrome

  a date and time picker will be used if the browser supports datetime input.not supporting will cause the browser to degrade to text input as a fallback.hence pattern attr is used as a validation.but as said earlier users still able to submit invalid data as dd could be submited as mm.as a typical solution select from element is used for each date,time and timezone input data.

  • month week time

    input types month, week, time

    are not supported well hwoever.this issue is solved the same way date,datetime-locale is solved using select form element.infact as a rule-a general one.all date and time related input types(date, time,datetime-locale,month and week) share the same solution in non-supporting browsers.also they share the same validation rules using min,max and step of course if they are used in a supporting browser.

• Buttons

  • type="button"

    simple button that does something when user clicks on it.button from element is prefered on this sort of button since type="button" element has no ending tag(closing).hence no html is included inside.

    it might look as follows:

         input type="button" value="send file" name="button" id="doc"
           

  • input="submit"

    submit button when clicked sendes form's data to the action specified url destination for processing at the server.

    it looks as follow:

  • input="image"

    is a submit button that looks exactly as img element with data submission ability.

    it looks as follow:

  • type="reset"

    is a reset button that resets from elements values to their default values.

    it looks as a simple reset button:

Text-related input controls

Text input types attributes:

text attributes including text,search,email,tel url and password have text-only common attributes.i can think of every single line text input type is of type="text" with special treatment.the attributes are:

• pattern
• minlength,maxlength,size
• placeholder
• spellcheck
• autocaptalize -ios safari

• type="email"

  input of type email might look as follow:

  email account:

  pattern attr can be used for browser validation.

• type="password"

  input of type password might look as follow:

  passowrd: pattern attr can be used for browser validation.

• type="search"

  input of type search might look as follows:

  look for your prefered location:

type="tel"

input of type tel might look as follows:

phone number:

• type="text"

  input of type text is the father of all single line text input types.it might look as follows:

  tell us who you are:

  Note: input of type text is the fallback if one of the type attr is not supported in older browsers.

• type="url"

  input of type URL might look exactly as any single line text input.

  surf:

  pattern attr can be used for browser validation