HTML Tutorial (Part XVI) – Working with Forms in HTML

Create data lists


One of the new features provided in HTML5 is the creation of data lists in relation to form elements. Data lists  are very similar to comboboxes, except that the combobox lets you select an option from predefined options. In the data lists, there is a possibility to enter the user option that is not predefined in the options. To create a datalist, we need a text box and a <datalist> tag. Then just type the name for the tag> <datalist> via the id attribute and set the new attribute to the corresponding input tag. Notice the following code:

 <input list = "cars" />
 <datalist id = "cars">
 <option value = "BMW">
 <option value = "Ford">
 <option value = "Volvo">
 </ datalist>


Create multi-line text boxes


<Textarea> tag: This tag is used to create multiline text fields and accepts the following attributes:


rows: Accepts the integer value as the value and increases the same number of rows to the text area. 
cols: Accepts the integer as the value and returns the same number of characters to the text area.

Consider the following code:

 <textarea rows = "4" cols = "20">
 At W3Schools you will find all the Web-building tutorials you need, from basic HTML to adv
 anced XML, SQL, ASP, and PHP.
 </ textarea>



Create all types of buttons


<Button> tag: This tag can be used to create any of the three buttons previously mentioned. This tag uses the following attributes.


name: 
Specifies the name for the button. value: Specifies the amount sent to the processor page. 
type Specifies the type of button that is created. And can set the following three values 
: submit: creates a submit button to submit the form. 
reset: A reset button is created to clear the elements of the form. 
button: A simple button that does not have a preset behavior.


In this type of text button, which will be placed inside the open tag and button button, the button title will be.

 <button type = "button"> Click Me! </ button>


Organize form elements


<Fieldset> tag: This tag is used for ordering and grouping other elements of the form. This tag only has generic attributes. 
Tag <legend>: This tag will always be used inside the fieldset tag and its title will be specified. And uses the following attributes. 
align: Specifies the position of the title. Accepts one of the following values: 
left: places the title in the top left. 
center: places the title in the top center. 
right: Titles in the top right.


The following statement shows how to use the fieldset and legend tags:

 <fieldset>
 <legend align = "center"> Personal Information: </ legend>
 Name: <input type = "text" size = "30" />
 <br />
 Email: <input type = "text" size = "30" />
 <br />
 Date of Birth: <input type = "text" size = "10" />
 </ fieldset>



Create progress bars


One of the elements provided in html5 is the progress bar (processing). This element is usually used to display the process of processing operations (especially the download and upload operations). To create this element, a tag called <progress> is used. This tag is of the attribute The following are used.


max: Accepts the correct integer as the upper value of the operation (usually 100) 
value: specifies the integer as the current value of the operation.

 The object's downloading progress:
 <progress value = "25" max = "100"> </ progress>



Well, so far, our work with forms has been completed, we will learn how to work with multimedia elements and how to add music and video to our html page.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Top