HTML <form> element attributes In HTML there are various attributes available for <form> element which are given below: HTML action attribute The action attribute of <form> element defines the process to be performed on form when form is submitted, or it is a URI to process the form information. The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to process your form. Note: If action attribute value is blank then form will be processed to the same page. Example: Output: Demo of action attribute of form element User Name: User Password It will redirect to a new page “action.html” when you click on submit button HTML method attribute The method attribute defines the HTTP method which browser used to submit the form. The possible values of method attribute can be: Example: AD Example: When submitting the data, it will display the entered data in the form of: HTML target attribute The target attribute defines where to open the response after submitting the form. The following are the keywords used with the target attribute. Example: Example: HTML autocomplete attribute The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an input field to complete automatically. It can have two values “on” and “off” which enables autocomplete either ON or OFF. The default value of autocomplete attribute is “on”. Example: Example: Note: it can be used with <form> element and <input> element both. HTML enctype attribute The HTML enctype attribute defines the encoding type of form-content while submitting the form to the server. The possible values of enctype can be: Example: Example: Example: HTML novalidate attribute HTML5 The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this attribute in form then it does not perform any type of validation and submit the form. Example: Output: Fill the form Enter name: Enter age: Enter email: Try to change the form detials with novalidate atttribute and without novalidate attribute and see the difference. HTML <input> element attribute HTML name attribute The HTML name attribute defines the name of an input element. The name and value attribute are included in HTTP request when we submit the form. Note: One should not omit the name attribute as when we submit the form the HTTP request includes both name-value pair and if name is not available it will not process that input field. Example: Output: Fill the form Enter name: Enter age: Enter email: Note: If you will not use name attribute in any input field, then that input field will not be submitted, when submit the form. Click on submit and see the URL where email is not included in HTTP request as we have not used name attribute in the email input field HTML value attribute The HTML value attribute defines the initial value or default value of an input field. Example: Output: Fill the form Enter your Name Enter your Email-address Enter your password Note: In password input filed the value attribute will always unclear HTML required attribute HTML5 HTML required is a Boolean attribute which specifies that user must fill that filed before submitting the form. Example: Output: Fill the form Enter your Email-address Enter your password If you will try to submit the form without completing email field then it will give an error pop up. HTML autofocus attribute HTML5 The autofocus is a Boolean attribute which enables a field automatically focused when a webpage loads. Example: HTML placeholder attribute HTML5 The placeholder attribute specifies a text within an input field which informs the user about the expected input of that filed. The placeholder attribute can be used with text, password, email, and URL values. When the user enters the value, the placeholder will be automatically removed. Example: Output: Registration form Enter your name Enter your Email address Enter your password HTML disabled attribute The HTML disabled attribute when applied then it disable that input field. The disabled field does not allow the user to interact with that field. The disabled input filed does not receive click events, and these input value will not be sent to the server when submitting the form. Example: Output: Registration form Enter User name Enter your Email address Enter your password HTML size attribute The size attribute controls the size of the input field in typed characters. Example: Output: Registration form with disbaled attribute Account holder name Account number CVV HTML form attribute HTML form attribute allows a user to specify an input filed outside the form but remains the part of the parent form. Example: Output:User Name: User password: The email field is outside the form but still it will remain part of the formUser email:

In HTML <input type=” “> is an important element of HTML form. The “type” attribute of input element can be various types, which defines information field. Such as <input type=”text” name=”name”> gives a text box. Following is a list of all types of <input> element of HTML. type=” “ Description text Defines a one-line text input field password Defines a one-line password input field submit Defines a submit button to submit the form to server reset Defines a reset button to reset all values in the form. radio Defines a radio button which allows select one option. checkbox Defines checkboxes which allow select multiple options form. button Defines a simple push button, which can be programmed to perform a task on an event. file Defines to select the file from device storage. image Defines a graphical submit button. HTML5 added new types on <input> element. Following is the list of types of elements of HTML5 type=” “ Description color Defines an input field with a specific color. date Defines an input field for selection of date. datetime-local Defines an input field for entering a date without time zone. email Defines an input field for entering an email address. month Defines a control with month and year, without time zone. number Defines an input field to enter a number. url Defines a field for entering URL week Defines a field to enter the date with week-year, without time zone. search Defines a single line text field for entering a search string. tel Defines an input field for entering the telephone number. Following is the description about types of <input> element with examples. 1. <input type=”text”>: <input> element of type “text” are used to define a single-line input text field. Example: Output: Input “text” type: The “text”field defines a sinlge line input text field.Enter first name Enter last name Note:The default maximum cahracter lenght is 20. 2. <input type=”password”>: The <input> element of type “password” allow a user to enter the password securely in a webpage. The entered text in password filed converted into “*” or “.”, so that it cannot be read by another user. Example: Output: Input “password” type: The “password”field defines a sinlge line input password field to enter the password securely.Enter User name Enter Password 3. <input type=”submit”>: The <input> element of type “submit” defines a submit button to submit the form to the server when the “click” event occurs. Example: Output: Input “submit” type: Enter User name Enter Password After clicking on submit button, this will submit the form to server and will redirect the page to action value.We will learn about “action” attribute in later chapters 4. <input type=”reset”>: The <input> type “reset” is also defined as a button but when the user performs a click event, it by default reset the all inputted values. Example: Output: Input “reset” type: User id:  Password:  Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values. 5. <input type=”radio”>: The <input> type “radio” defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected at a time. Example: Output: Input “radio” type Kindly Select your favorite color Red bluegreenpink 6. <input type=”checkbox”>: The <input> type “checkbox” are displayed as square boxes which can be checked or unchecked to select the choices from the given options. Note: The “radio” buttons are similar to checkboxes, but there is an important difference between both types: radio buttons allow the user to select only one option at a time, whereas checkbox allows a user to select zero to multiple options at a time. Example: Output: Input “checkbox” type Registration Form Enter your Name:  Kindly Select your favorite sportsCricketTennisFootballBaseballBadminton 7. <input type=”button”>: The <input> type “button” defines a simple push button, which can be programmed to control a functionally on any event such as, click event. Note: It mainly works with JavaScript. Example: Output: Input “button” type. Click the button to see the result: Note: In the above example we have used the “alert” of JS, which you will learn in our JS tutorial. It is used to show a pop window. 8. <input type=”file”>: The <input> element with type “file” is used to select one or more files from user device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API. Example: Output: Input “file” type. We can choose any type of file until we do not specify it! The selected file will appear at next to “choose file” optionSelect file to upload:   9. <input type=”image”>: The <input> type “image” is used to represent a submit button in the form of image. Example: HTML5 newly added <input> types element 1. <input type=”color”>: The <input> type “color” is used to define an input field which contains a colour. It allows a user to specify the colour by the visual colour interface on a browser. Note: The “color” type only supports color value in hexadecimal format, and the default value is #000000 (black). Example: Output: Input “color” types: Pick your Favorite color:  Up-click  Down-click Note:The default value of “color” type is #000000 (black). It only supports color value in hexadecimal format. 2. <input type=”date”>: The <input> element of type “date” generates an input field, which allows a user to input the date in a given format. A user can enter the date by text field or by date picker interface. Example: Output: Input “date” type Select Start and End Date:  Start date:  End date: 3. <input type=”datetime-local”>: The <input> element of type “datetime-local” creates input filed which allow a user to select the date as well as local time in the hour and minute without time zone information. Example: Output: Input “datetime-local” type Select the meeting schedule: Select date & time:  4. <input type=”email”>: The <input> type “email” creates an input filed which allow a

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. . Why use HTML Form HTML forms are required if you want to collect some data from of the site visitor. For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address. HTML Form Syntax HTML Form Tags Let’s see the list of HTML 5 form tags. Tag Description <form> It defines an HTML form to enter inputs by the used side. <input> It defines an input control. <textarea> It defines a multi-line input control. <label> It defines a label for an input element. <fieldset> It groups the related element in a form. <legend> It defines a caption for a <fieldset> element. <select> It defines a drop-down list. <optgroup> It defines a group of related options in a drop-down list. <option> It defines an option in a drop-down list. <button> It defines a clickable button. HTML 5 Form Tags Let’s see the list of HTML 5 form tags. Tag Description <datalist> It specifies a list of pre-defined options for input control. <keygen> It defines a key-pair generator field for forms. <output> It defines the result of a calculation. HTML <form> element The HTML <form> element provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc. Note: The <form> element does not itself create a form but it is container to contain all required form elements, such as <input>, <label>, etc. Syntax: HTML <input> element The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input. Example: Output: HTML TextField Control The type=”text” attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc. Output: Note: If you will omit ‘name’ attribute then the text filed input will not be submitted to server. HTML <textarea> tag in form The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using “rows” or “cols” attribute or by CSS. Example: Output: Label Tag in Form It is considered better to have label in form. As it makes the code parser/browser/user friendly. If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag. NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy with touchscreens. Output: HTML Password Field Control The password is not visible to the user in password field control. Output: HTML 5 Email Field Control The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field. It will display in browser like below: Note: If we will not enter the correct email, it will display error like: Radio Button Control The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc. If you use one name for all the radio buttons, only one radio button can be selected at a time. Using radio buttons for multiple options, you can only choose a single option at a time. Checkbox Control The checkbox control is used to check multiple options from given checkboxes. Note: These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display. Output: Submit button control HTML <input type=”submit”> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server. Syntax: The type = submit , specifying that it is a submit button The value attribute can be anything which we write on button on web page. The name attribute can be omit here. Example: Output: HTML <fieldset> element: The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements. Example: Output: HTML Form Example Following is the example for a simple form of registration. Output: HTML Form Example Let’s see a simple example of creating HTML form.

HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list. The 3 HTML description list tags are given below: Output:HTMLis a markup languageJavais a programming language and platformJavaScriptis a scripting languageSQLis a query language

HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list: To represent different ordered lists, there are 4 types of attributes in <ul> tag. Type Description Type “disc” This is the default style. In this style, the list items are marked with bullets. Type “circle” In this style, the list items are marked with circles. Type “square” In this style, the list items are marked with squares. Type “none” In this style, the list items are not marked . HTML Unordered List Example Output: ul type=”circle” Output: ul type=”square” Output: ul type=”none” Output: Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-type. Following is the example to show the CSS property for ul tag. Code: Output:

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list: To represent different ordered lists, there are 5 types of attributes in <ol> tag. Type Description Type “1” This is the default type. In this type, the list items are numbered with numbers. Type “I” In this type, the list items are numbered with upper case roman numbers. Type “i” In this type, the list items are numbered with lower case roman numbers. Type “A” In this type, the list items are numbered with upper case letters. Type “a” In this type, the list items are numbered with lower case letters. HTML Ordered List Example Let’s see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type=”1″ because it is the default type. Output: ol type=”I” Let’s see the example to display list in roman number uppercase. Output: ol type=”i” Let’s see the example to display list in roman number lowercase. Output: ol type=”A” Let’s see the example to display list in alphabet uppercase. Output: ol type=”a” Let’s see the example to display list in alphabet lowercase. Output: start attribute The start attribute is used with ol tag to specify from where to start the list items. <ol type=”1″ start=”5″> : It will show numeric values starting with “5”. <ol type=”A” start=”5″> : It will show capital alphabets starting with “E”. <ol type=”a” start=”5″> : It will show lower case alphabets starting with “e”. <ol type=”I” start=”5″> : It will show Roman upper case value starting with “V”. AD <ol type=”i” start=”5″> : It will show Roman lower case value starting with “v”. Output: reversed Attribute: This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the reversed attribute with

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists: Note: We can create a list inside another list, which will be termed as nested List. HTML Ordered List or Numbered List In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag. Output: Click here for full details of HTML ordered list. HTML Ordered List HTML Unordered List or Bulleted List In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag. Output: Click here for full details of HTML unordered list. HTML Unordered List HTML Description List or Definition List HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list. The HTML definition list contains following three tags: Output:Aries-One of the 12 horoscope sign.Bingo-One of my evening snacksLeo-It is also an one of the 12 horoscope sign.Oracle-It is a multinational technology corporation. Click here for full details of HTML description list. HTML Description List HTML Nested List A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list. Code:

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements. In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags. HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page . HTML Table Tags Tag Description <table> It defines a table. <tr> It defines a row in a table. <th> It defines a header cell in a table. <td> It defines a cell in a table. <caption> It defines the table caption. <colgroup> It specifies a group of one or more columns in a table for formatting. <col> It is used with <colgroup> element to specify column properties for each column. <tbody> It is used to group the body content in a table. <thead> It is used to group the header content in a table. <tfooter> It is used to group the footer content in a table. HTML Table Example Let’s see the example of HTML table tag. It output is shown above. Output: First_Name Last_Name Marks Sonoo Jaiswal 60 James William 80 Swati Sironi 82 Chetna Singh 72 In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values. HTML Table with Border There are two ways to specify border for HTML tables. 1) HTML Border attribute You can use border attribute of table tag in HTML to specify border. But it is not recommended now. Output: First_Name Last_Name Marks Sonoo Jaiswal 60 James William 80 Swati Sironi 82 Chetna Singh 72 2) CSS Border property It is now recommended to use border property of CSS to specify border in table. You can collapse all the borders in one border by border-collapse property. It will collapse the border into one. Output: Name Last Name Marks Sonoo Jaiswal 60 James William 80 Swati Sironi 82 Chetna Singh 72 HTML Table with cell padding You can specify padding for table header and table data by two ways: The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So let’s see the code of CSS. Output: Name Last Name Marks Sonoo Jaiswal 60 James William 80 Swati Sironi 82 Chetna Singh 72 HTML Table width: We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage. We can adjust our table width as per our requirement. Following is the example to display table with width. Example: Output: HTML Table with colspan If you want to make a cell span more than one column, you can use the colspan attribute. It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute. Let’s see the example that span two columns. CSS code: HTML code: Output: Name Mobile No. Ajeet Maurya 7503520801 9555879135 HTML Table with rowspan If you want to make a cell span more than one row, you can use the rowspan attribute. It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values. Let’s see the example that span two rows. CSS code: HTML code: Output: Name Ajeet Maurya Mobile No. 7503520801 9555879135 HTML table with caption HTML caption is diplayed above the table. It must be used after table tag only. Styling HTML table even and odd cells CSS code: Output: NOTE: You can also create various types of tables using different CSS properties in your table.

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let’s see an example of HTML image. Output: Attributes of HTML img tag The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below. 1) src It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of image may be on the same directory or another server. 2) alt The alt attribute defines an alternate text for the image, if it can’t be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective. 3) width It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute. 4) height It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute. Use of height and width attribute with img tag You have learnt about how to insert an image in your web page, now if we want to give some height and width to display image according to our requirement, then we can set it with height and width attributes of image. Example: Output: Note: Always try to insert the image with height and width, else it may flicker while displaying on webpage. Use of alt attribute We can use alt attribute with  tag. It will display an alternative text in case if image cannot be displayed on browser. Following is the example for alt attribute: Output: How to get image from another directory/folder? To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this: In above statement we have put image in local disk E——>images folder——>animal.png. Note: If src URL will be incorrect or misspell then it will not display your image on web page, so try to put correct URL. Use <img> tag as a link We can also link an image with other page or we can use an image as a link. To do this, put <img> tag inside the <a> tag. Example: Output: Supporting Browsers Element  Chrome  IE  Firefox  Opera  Safari <img> Yes Yes Yes Yes Yes

The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The “href” attribute is the most important attribute of the HTML a tag. and which links to destination page or URL. href attribute of HTML anchor tag The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page. Let’s see an example of HTML anchor tag. Specify a location for Link using target attribute If we want to open that link to another page then we can use target attribute of <a> tag. With the help of this link will be open in next page. Example: Output: Note: Appearance of HTML anchor tag An unvisited link is displayed underlined and blue. A visited link displayed underlined and purple. An active link is underlined and red.