name: portada layout: true class: portada-slide, middle, right --- # HTML Forms ## Markup languages .footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))] --- layout: true class: regular-slide .right[.logo[]] --- # HTML Forms - .b[HTML] Forms are a HTML element used to ask the user information. - It is a wrapper for different input elements. - Data is sent to another page, that processes it. ```html <form action="/my-handling-form-page" method="post"> ``` - `action`: Page that handles the data. - `method`: Type of the request sent to the page. (POST, GET) .center[] .center[[W3 Forms](https://www.w3schools.com/tags/tag_form.asp)] --- # Inputs: Text input - `type` attribute specifies the type of text input. .center[[W3 Input elements](https://www.w3schools.com/tags/tag_input.asp)] ``` <form> <div> <label for="comment">text:</label> <input type="text" id="comment" name="comment" value="I'm a text field"> </div> <div> <label for="email">email:</label> <input type="email" id="email" name="email" multiple> </div> <div> <label for="pwd">password:</label> <input type="password" id="pwd" name="pwd"> </div> <div> <label for="search">search:</label> <input type="search" id="search" name="search"> </div> <div> <label for="tel">tel:</label> <input type="tel" id="tel" name="tel"> </div> </form> ``` --- # Inputs: Text input .center[[W3 Input elements](https://www.w3schools.com/tags/tag_input.asp)] <form> <div> <label for="comment">text:</label> <input type="text" id="comment" name="comment" value="I'm a text field"> </div> <div> <label for="email">email:</label> <input type="email" id="email" name="email" multiple> </div> <div> <label for="pwd">password:</label> <input type="password" id="pwd" name="pwd"> </div> <div> <label for="search">search:</label> <input type="search" id="search" name="search"> </div> <div> <label for="tel">tel:</label> <input type="tel" id="tel" name="tel"> </div> </form> --- # Inputs: More Text input ``` <form> <div> <label for="url">url:</label> <input type="url" id="url" name="url"> </div> <div> <label for="file">file:</label> <input type="file" name="file" id="file" accept="image/*" multiple> </div> <div> <label for="hidden">hidden:</label> <input type="hidden" id="timestamp" name="timestamp" value="1286705410"> </div> <div> <label for="textarea">textarea:</label> <textarea id="textarea" name="user_message"></textarea> </div> </form> ``` --- # Inputs: More Text input <form> <div> <label for="url">url:</label> <input type="url" id="url" name="url"> </div> <div> <label for="file">file:</label> <input type="file" name="file" id="file" accept="image/*" multiple> </div> <div> <label for="hidden">hidden:</label> <input type="hidden" id="timestamp" name="timestamp" value="1286705410"> </div> <div> <label for="textarea">textarea:</label> <textarea id="textarea" name="user_message"></textarea> </div> </form> --- # Select ``` <form> <div> <select id="simple" name="simple"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select> </div> <div> <select id="groups" name="groups"> <optgroup label="Fruits"> <option>Banana</option> <option selected>Cherry</option> <option>Lemon</option> </optgroup> <optgroup label="Vegetables"> <option>Carrot</option> <option>Eggplant</option> <option>Potato</option> </optgroup> </select> </div> </form> ``` <form> <div> <select id="simple" name="simple"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select> </div> <div> <select id="groups" name="groups"> <optgroup label="Fruits"> <option>Banana</option> <option selected>Cherry</option> <option>Lemon</option> </optgroup> <optgroup label="Vegetables"> <option>Carrot</option> <option>Eggplant</option> <option>Potato</option> </optgroup> </select> </div> </form> --- # Multiple Select ``` <form> <div> <select multiple id="multi" name="multi"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select> </div> </form> ``` <form> <div> <select multiple id="multi" name="multi"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select> </div> </form> --- # Fieldset ``` <fieldset> <legend>Personal data</legend> <div> <label for="name">Name:</label> <input type="text" id="name" name="name"> </div> <div> <label for="surname">Surname:</label> <input type="text" id="surname" name="surname"> </div> </fieldset> ``` <fieldset> <legend>Personal data</legend> <div> <label for="name">Name:</label> <input type="text" id="name" name="name"> </div> <div> <label for="surname">Surname:</label> <input type="text" id="surname" name="surname"> </div> </fieldset> --- # Radio buttons ``` <form> <fieldset> <legend>Fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">Small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">Medium</label> </p> <p> <input type="radio" name="size" id="size_3" value="large"> <label for="size_3">Large</label> </p> </fieldset> </form> ``` <form> <fieldset> <legend>Fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">Small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">Medium</label> </p> <p> <input type="radio" name="size" id="size_3" value="large"> <label for="size_3">Large</label> </p> </fieldset> </form> --- # Buttons ``` <form id="contact-form"> <div> <label for="name">Name:</label> <input type="text" id="name" name="name"> </div> </form> <button type="submit" form="contact-form" value="Submit">Submit</button> ``` <form id="contact-form"> <div> <label for="name">Name:</label> <input type="text" id="name" name="name"> </div> </form> <button type="submit" form="contact-form" value="Submit">Submit</button>