Html form tag

Registration form design

1. HTML FORMS 1 By ShreyaChougule

2. The <form> Element The HTML <form> element defines a form that is used to collect user input An HTML form contains different form elements . Form elements are types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. Syntax of form is given by:- <form> . form elements(different input elements) . </form> 2 By ShreyaChougule

3. Use of The <input> Element The <input> element is one of the most important form element. The <input> element can be displayed in several ways, depending on the  type  attribute. Some of the types of input elements are as follows:- Type Description <input type=“text”> Gives one line text input <input type=“radio”> Used for selecting one of the many choices <input type=“submit”> Used for submitting form 3 By ShreyaChougule

4. Action Attribute The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button. If the action attribute is omitted, the action is set to the current page 4 By ShreyaChougule

5. Target Attribute The target attribute specifies if the submitted result will open in a new browser tab, or in the current window. The default value is "_self" which means the form will be submitted in the current window. To make the form result open in a new browser tab, use the value "_blank": <form action="/action_page.php"  target="_blank" > 5 By ShreyaChougule

6. Method Attribute The method attribute specifies the HTTP method ( GET  or  POST ) to be used when submitting the form data. Get is used to request data from specified resource. Post is used to send data to server to create or update resource. Get method:-It gives content of form in web address <form action="/action_page.php"  method="get" > Post method:-It does not give any content. <form action="/action_page.php"  method=“post" > 6 By ShreyaChougule

7. Use of get method The default method when submitting form data is GET. However, when GET is used, the submitted form data will be  visible in the page address field : / action_page.php?firstname = Mickey&lastname =Mouse Appends form-data into the URL in name/value pairs The length of a URL is limited (about 3000 characters) Never use GET to send sensitive data! (will be visible in the URL) GET is better for non-secure data, like query strings in Google 7 By ShreyaChougule

8. Use of Post Method Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field. POST has no size limitations, and can be used to send large amounts of data . 8 By ShreyaChougule

9. Name Attribute Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all. If we use get method then the omitted name will not be visible at web address bar. Syntax:-  <input type="text" name="lastname" value="Mouse"> OUTPUT 9 By ShreyaChougule

10. Grouping Form data Generally in order to group certain set of data in the form <fieldset> tag is used. The <legend> element defines a caption for the <fieldset> element. Syntax:-<form action=“”> <fieldset> <legend>Heading you want to display</legend> <label for=“”> <input type….> </fieldset> </form> 10 By ShreyaChougule

11. HTML Form Elements Input Element Select Element:- The <select> element defines a  drop-down list. The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option: <option value=“xyz" selected>Name of Selected value</option> Syntax of select element:- <select name=“ abc ">   <option value=“one">One</option>   <option value=“two">Two</option>   <option value=“….">…..</option>   <option value=“….">….</option> </select> 11 By ShreyaChougule

12. HTML Form Elements 2.Select Element:- Use the size attribute to specify the number of visible values: <select name="cars"  size="3" > Here three values of car will be visible It allows multiple option selection. <select name="cars" size="4"  multiple > Use ctrl to select multiple options at a time . 3. TextArea Element:- The < textarea > element defines a multi-line input field ( a text area ): 12 By ShreyaChougule

13. HTML Form Elements Example < textarea  name="message" rows="10" cols="30"> The cat was playing in the garden. </ textarea > The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area. 4. Button Element:- This element defines clickable button. Syntax:- <button type="button" onclick ="alert('Hello World!')">Click Me!</button> 13 By ShreyaChougule

14. HTML Input Types Input type Text:- <input type="text"> defines a one-line text input field. Syntax:- <form>   First name:<br>   <input type="text" name="firstname"><br>   Last name:<br>   <input type="text" name="lastname"> </form> 2. Input type Password:- <input type=“password”> it gives password in asterisk mark or black dots. Syntax:- <input type="password" name=" psw "> 3. Input type Submit:- <input type="submit"> defines a button for  submitting  form data to a  form-handler . 14 By ShreyaChougule

15. HTML Input Types The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: Syntax:- <input type="submit" value="Submit"> Input type Reset:- <input type="reset"> defines a  reset button  that will reset all form values to their default values. Syntax:- <input type=“reset" value=“reset"> If you change the input values and then click the "Reset" button, the form-data will be reset to the default values. 15 By ShreyaChougule

16. HTML Input Types 5. Input type radio:- <input type="radio"> defines a  radio button . Radio buttons let a user select ONLY ONE of a limited number of choices e.g.:- <form>   <input type="radio" name="gender" value="male" checked> Male<br>   <input type="radio" name="gender" value="female"> Female<br>   <input type="radio" name="gender" value="other"> Other </form> 6. Input type Checkbox:- <input type="checkbox"> defines a  checkbox . Checkboxes allows a user select ZERO or MORE options of a limited number of choices. 16 By ShreyaChougule

17. HTML Input Types e.g. :- <form>   <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>   <input type="checkbox" name="vehicle2" value="Car"> I have a car  </form> 7. Input type Button:-<input type="button"> defines a  button E.g.:- <input type="button"  onclick ="alert('Hello World!')" value="Click Me!"> 17 By ShreyaChougule

18. HTML Input Attributes Value Attribute:- The value attribute specifies the initial value for an input field. Readonly Attribute:- The readonly attribute specifies that the input field is read only (cannot be changed) Disabled Attribute:- The disabled attribute specifies that the input field is disabled. A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form The size attribute specifies the size (in characters) for the input field <form> First name:<br>   <input type="text" name="firstname" value="John" readonly disabled size=“40”> </form> 18 By ShreyaChougule

19. Label tag in form tag 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. <form>         <label  for=" firstname " > First Name:  </label>                   <input  type="text" id=" firstname " name=" firstname " />   < br />        <label  for=" lastname " > Last Name:  </label>                   <input  type="text" id=" lastname " name=" lastname " />   < br />      </form>    19 By ShreyaChougule

20. HTML5 Input types Input Type Color:The  <input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field. Input Type Date The <input type="date"> is used for input fields that should contain a date. e.g.:-<form>   Select your favorite color:   <input type="color" name=" favcolor "> <input type="date" name=" bday "> </form> . 20 By ShreyaChougule

21. HTML5 Input types Input Type Email:-The <input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input. <input type="email" name="email"> Input Type File:-The <input type="file"> defines a file-select field and a "Browse" button for file uploads. Select a file: <input type="file" name=" myFile "> Input Type Number:-The <input type="number"> defines a  numeric  input field. You can also set restrictions on what numbers are accepted. . 21 By ShreyaChougule

22. HTML5 Input types The following example displays a numeric input field, where you can enter a value from 1 to 5: <input type="number" name="quantity" min="1" max="5"> Input Type Range:-The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes: <input type="range" name="points" min="0" max="10"> Input Type Search:-The <input type="search"> is used for search fields (a search field behaves like a regular text field). Google:<input type="search" name=" googlesearch "> 22 By ShreyaChougule

23. HTML5 Input types Input Type Url :-The <input type=" url "> is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted. Some smartphones recognize the url type, and adds ".com" to the Add your homepage:   <input type=" url " name="homepage">keyboard to match url input. 23 By ShreyaChougule

24. HTML5 Attributes HTML5 added the following attributes for <input>:form The height and width Attributes:The  height and width attributes specify the height and width of an <input type="image"> element. Always specify the size of images. If the browser does not know the size, the page will flicker while images load. <input type="image"  src ="img_submit.gif" alt="Submit" width="48" height="48"> The list Attribute:-The list attribute refers to a < datalist > element that contains pre-defined options for an <input> element. <input list="browsers">< datalist  id="browsers">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"> </ datalist > 24 By ShreyaChougule

25. HTML5 Attributes The min and max Attributes:-The min and max attributes specify the minimum and maximum values for an <input> element. The min and max attributes work with the following input types: number, range, date, datetime -local, month, time and week. Enter a date before 1980-01-01: <input type="date" name=" bday " max="1979-12-31"> The multiple Attribute:-The multiple attribute specifies that the user is allowed to enter more than one value in the <input>element. The multiple attribute works with the following input types: email, and file. Select Files: <input type="file" name=" img " multiple> 25 By ShreyaChougule

26. HTML5 Attributes The placeholder Attribute:-The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format). The hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url , tel , email, and password. The required attribute:- specifies that an input field must be filled out before submitting the form. The required attribute works with the following input types: text, search, url , tel , email, password, date pickers, number, checkbox, radio, and file. e.g. <input type="text" name=" fname " placeholder="First name“ required> 26 By ShreyaChougule

27. HTML5 Attributes 27 By ShreyaChougule