Web Form Basics
A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.
Forms are enclosed in the HTML form tag. This tag specifies the communication endpoint the data entered into the form should be submitted to, and the method of submitting the data, GET or POST.
Elements
Forms can be made up of standard graphical user interface elements:
text — a simple text box that allows input of a single line of text.
email – a type of text that requires a partially validated email address
number – a type of text that requires a number
password — similar to text, it is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *)
radio — a radio button
file — a file select control for uploading a file
reset — a reset button that, when activated, tells the browser to restore the values to their initial values.
submit — a button that tells the browser to take action on the form (typically to send it to a server)
textarea — much like the text input field except a textarea allows for multiple rows of data to be shown and entered
select — a drop-down list that displays a list of items a user can select from
A grid view, however, can be mimicked by using a standard HTML table with each cell containing a text input element. A tree view could also be mimicked through nested tables or, more semantically appropriately, nested lists. In both cases, a server-side process is responsible for processing the information, while JavaScript handles the user-interaction. Implementations of these interface elements are available through JavaScript libraries such as jQuery.
HTML 4 introduced the label tag, which is intended to represent a caption in a user interface, and can be associated with a specific form control by specifying the id attribute of the control in the label tag’s for attribute. This allows labels to stay with their elements when a window is resized and to allow more desktop-like functionality e.g. clicking a radio button or checkbox’s label will activate the associated input element.
HTML 5 introduces a number of input tags that can be represented by other interface elements. Some are based upon text input fields and are intended to input and validate specific common data. These include email to enter email addresses, tel for telephone numbers, number for numeric values. There are additional attributes to specify required fields, fields that should have keyboard focus when the web page containing the form is loaded, and placeholder text that is displayed within the field but is not user input (such as the ‘Search’ text displayed in many search input fields before a search term is entered.) These tasks used to be handled with JavaScript, but had become so common that support for them was added to the standard. The date input type displays a calendar from which the user can select a date or date range. And the color input type can be represented as an input text simply checking the value entered is a correct hexadecimal representation of a color, according to the specification, or a color picker widget (the latter being the solution used in most browsers which support this attribute).
IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.
Back to Angular 4 Tutorial Main Page 
