HTML FORMS
class: center, middle .title[ Front-end training # HTML FORMS ] --- # Forms Introduction - HTML forms are used to create (rather primitive) GUIs on Web pages - Usually the purpose is to ask the user for information - The information is then sent back to the server - A form is an area that can contain form elements - The syntax is: `<form> ...form elements... </form>` - Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc - Other kinds of HTML tags can be mixed in with the form elements - A form usually contains a Submit button to send the information in the form elements to the server --- # The `<form>` tag The `<form arguments> ... </form>` tag encloses form elements. The arguments to form tell what to do with the user input: - `action="url"` Specifies where to send the data when the Submit button is clicked; - `method="get"` - Form data is sent as a URL with ?form_data info appended to the end; - Can be used only if data is all ASCII and not more than 100 characters; - `method="post"` - Form data is sent in the body of the URL request; - Cannot be bookmarked by most browsers; - `target="target"` - Tells where to open the page sent as a result of the request; - `target="_blank"` means open in a new window; - `target="_top"` means use the same window. --- # The `<fieldset>, <legend>` tag The fieldset is a useful tool for organizing and grouping related items within a form, and has been used for a long time in desktop applications. <br><br> .columns.small[.col-60[ ``` html <form action="script.php"> <fieldset> <legend>User data</legend> <label for="userName">Enter your name:</label> <input type="text" id="userName" /> </fieldset> <fieldset> <legend>User Skills</legend> <label for="userSkills">Enter your skills:</label> <input type="text" id="userSkills" /> </fieldset> <fieldset> <input type="submit" name="Submit" value="Send"> </fieldset> </form> ``` ].col-40.demo[ <form action="script.php"> <fieldset> <legend>User data</legend> <label for="userName">Enter your name:</label> <input type="text" id="userName" /> </fieldset> <fieldset> <legend>User Skills</legend> <label for="userSkills">Enter your skills:</label> <input type="text" id="userSkills" /> </fieldset> <fieldset> <input type="submit" name="Submit" value="Send"> </fieldset> </form> ]] --- # The `<input>` tag The input element represents a typed data field, usually with a form control to allow the user to edit the data. Most, but not all, form elements use the input tag, with a `type="..."` argument to tell which kind of element it is. The most used types `text`, `checkbox`, `radio`, `password`, `hidden`, `submit`, `reset`, `button`, `file`, or `image`. Input tag arguments: - `name`: the name of the element - `value`: the “value” of the element; used in different ways for different values of type - `readonly`: the value cannot be changed - `disabled`: the user can’t do anything with this element --- # The `<textarea>` tag The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value. .columns[.col-50[ The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value. ``` html <textarea cols="20" rows="10"></textarea> ``` ].col-50.demo[ <div> <label for="message">Message:</label> <textarea cols="20" rows="10"></textarea> </div> ]] --- # Text input .columns[.col-60[ A text field: ``` html <input type="text" name="textfield" value="Hello"> ``` A password field: ``` html <input type="password" name="text2" value="secret"> ``` A multi-line text field: ``` html < textarea name="textarea" cols="24" rows="2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, ipsum, officia, doloremque sapiente nesciunt dolore. < /textarea> ``` ].col-40.demo[ <p>A text field: <input type="text" name="textfield" value="Hello"></p> <p>A password field:<input type="password" name="text2" value="secret"></p> <p>A text field:<textarea name="textarea" cols="24" rows="2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, ipsum, officia, doloremque sapiente nesciunt dolore. <\/textarea></p> ]] --- # Buttons .columns[.col-60[ A submit button - send data: ``` html <input type="submit" name="Submit" value="Submit"> ``` A reset button - restore all form elements to their initial state: ``` html <input type="reset" name="Submit2" value="Reset"> ``` A plain button - take some action as specified by JavaScript: ``` html <input type="button" name="Submit3" value="Push Me"> ``` ].col-40.demo[ A submit button - send data: <input type="submit" name="Submit" value="Submit"> <br><br> A reset button - restore all form elements to their initial state: <input type="reset" name="Submit2" value="Reset"> <br><br> A plain button - take some action as specified by JavaScript: <input type="button" name="Submit3" value="Push Me"> ]] --- # Checkboxes .columns.small[.col-70[ A checkbox: ``` html <input type="checkbox" name="checkbox" value="checkbox" checked> ``` Attributes: - `type: "checkbox"`; - `name`: used to reference this form element from JavaScript; - `value`: value to be returned when element is checked. Note that there is no text associated with the checkbox—you have to supply text in the surrounding HTML Example: ``` html <input type="checkbox" name="checkbox" value="checkbox1" checked> male <br> <input type="checkbox" name="checkbox" value="checkbox2" checked> female ``` ].col-30.demo[ <input type="checkbox" name="checkbox" value="checkbox1" checked> male <br> <input type="checkbox" name="checkbox" value="checkbox2" checked> female ]] --- # Radio buttons .columns[.col-70[ Radio buttons: ``` html <input type="radio" name="sex" value="myValue1"> male<br> <input type="radio" name="sex" value="myValue2" checked> female ``` If two or more radio buttons have the same name, the user can only select one of them at a time. This is how you make a radio button “group”. As with checkboxes, radio buttons do not contain any text. ].col-30.demo[ <input type="radio" name="sex" value="myValue1"> male<br> <input type="radio" name="sex" value="myValue2" checked> female ]] --- # Drop-down menu .columns[.col-70[ A menu or list: ``` html <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select> ``` Additional arguments: - `size`: the number of items visible in the list (default is "1") - `multiple`: if set to "true", any number of items may be selected (default is "false") ].col-30.demo[ <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select> <br><br> <select multiple name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select> ]] --- # The `<label>` tag (part 1) Label is used to link the descriptive text for a given form control directly to that control. It provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together. --- # The `<label>` tag (part 2) Example 1: ```html <label for="userName1">Enter your name:</label> <input type="text" name="username" id="userName" value="Author Name" /> ``` Example 2: ``` html <label> Enter your name: <input type="text" name="username" value="Author Name" /> </label> ``` <br> .columns[.col-50.demo[ <label for="userName1">Enter name:</label> <input type="text" name="username" id="userName1" value="Author Name" /> ].col-50.demo[ <label> Enter name: <input type="text" name="username" value="Author Name" /> </label> ]] --- # Hidden fields All input fields are sent back to the server, including hidden fields. This is a way to include information that the user doesn’t need to see. The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted. ``` html <input type="hidden" name="secretMessage" value="hello"> ``` --- # HTML5 input types (part 1) .columns.small[.col-60[ - Tells the browser not to submit the form, unless the user has entered a valid email address: ``` html <input type=email> ``` - Causes the browser to ensure that the entered field is a correct URL: ``` html <input type=url> ``` - Browsers will display a (popup) calendar widget: ``` html <input type=date> ``` ``` html <input type="month" />``` ``` html <input type="week" />``` ``` html <input type="time" />``` ``` html <input type="datetime" />``` ``` html <input type="datetime-local" />``` ].col-40.demo[ <form> Email: <input type=email> <br><br> URL: <input type=url> <br><br> Date: <input type=date> <br><br> Month: <input type="month" /><br><br> Time: <input type="time" /><br><br> Datetime local: <input type="datetime-local" /><br><br> <input type="Submit" value="Ok" /> </form> ]] --- # HTML5 input types (part 2) .columns[.col-70[ - Throws an error if the user doesn’t enter a numeric value. Works with min, max and step attributes: ```html <input type=number> ``` - Renders as a slider: ```html <input type=range> ``` - Expects a search term: ``` html <input type=search> ``` - Expects a telephone number. The smartphone brings up a telephone input keyboard: ``` html <input type=tel> ``` - Allows the user to input a color value via a picker: ``` html <input type=color> ``` ].col-30.demo[ Number: <input type=number><br><br> Range: <input type=range><br><br> Search: <input type=search><br><br> Tel: <input type=tel><br><br> Color: <input type=color><br><br> ]] --- # HTML5 attributes .columns[.col-60[ Placeholder attribute: ``` html <input type="search" placeholder="Place a search term here..." /> ``` Required attribute: ``` html <input type="email" required /> ``` Multiple attribute for multiple uploads or email addresses: ``` html <input type="file" multiple /> ``` Pattern attribute match input to custom regular expression: ``` html <input pattern="[0-9][A-Z]{3}" title="A digit follow by three uppercase letters" /> ``` ].col-40.demo[ <form action=""> Placeholder attribute: <input type="search" placeholder="Place a search term here..." /><hr> Required attribute: <input type="email" required /><hr> Multiple attribute for multiple uploads or email addresses: <input type="file" multiple /><hr> Pattern attribute match input to custom regular expression: <input pattern="[0-9][A-Z]{3}" title="A digit follow by three uppercase letters" /><hr> <input type="submit" value="submit"> </form> ]] --- # Lets Practice <a href="https://www.dropbox.com/s/2sb7jx5awp98v32/form.jpg?dl=0#">Layout</a>
