Vista previa del material en texto
Introducción al Desarrollo Web Departamento de Informática HTML - Parte 2 2022 Formularios - Objetivos ● Qué son? ● Para qué sirven? ● Cómo se crean? ● Cómo funcionan? Formularios ● Necesidad de interactuar con los usuarios. ● Componente de una página web. <form> </form> ● Existen controles para que el usuario proporcione información. ● El procesamiento de esa información es en el servidor (más adelante). Opciones? Formularios - Definir ● DONDE se mandan los datos ● COMO se mandan los datos <form action="/donde" method="como"> </form> Formularios - Elementos de entrada ● Campo de texto ● Casilla de verificación (Checkbox) ● Botón de radio (radiobutton) ● Cuadro de selección (select) ● Botón de enviar (submit) ● Botón de reinicio (Reset) ● Selección de archivo (upload) ● Campo de contraseña ● etc. ● etc (HTML5). Formularios - Texto <form action="" method="post"> <input type="text"/> <textarea></textarea> </form> Formularios - Texto <form action="" method="post"> <label>Tu Nombre</label> <br/> <input type="text"/> <label>Mensaje</label> <br/> <textarea></textarea> </form> Formularios - Select <form action="" method="post"> <label>Tu equipo favorito:</label> <br/> <select> <option>Boca Juniors</option> <option>Tigre</option> <option>Belgrano</option> <option>Flamengo</option> <option>Riber</option> </select> </form Formularios - Checkbox <form action="" method="post"> <label>Equipos que descendieron:</label> <br/> <input type="checkbox"> Boca<br> <input type="checkbox"> San Lorenzo<br> <input type="checkbox"> Racing<br> <input type="checkbox"> Independiente<br> <input type="checkbox"> Riber<br> </form Formularios - Radio <form action="" method="post"> <label>Categoría:</label> <br/> <input type="radio">Grande <input type="radio">Chico </form Formularios - File <form action="" method="post" enctype="multipart/form-data> <label>Suba el escudo de su equipo:</label> <br/> <input type="file"> </form> Formularios - Botones <form action="" method="post" enctype="multipart/form-data> <input type="submit"> <input type="reset"> </form> Formularios - Oculto <form action="" method="post"> <input type="hidden" value="3.1416"> </form> Formularios - Password <form action="" method="post" enctype="multipart/form-data> <label>Contraseña:</label> <br/> <input type="password"> </form> Formularios - Atributos id name value checked size maxlength readonly disable=”disabled” Formularios - Texto <form action="" method="post"> <input type="text" id="nombre" name="nombre" value="" /> <textarea id="mensaje" name="mensaje" cols="40" rows="5"></textarea> </form> Formularios - Select <form action="" method="post"> <label for="equipo">Tu equipo favorito:</label> <br/> <select id="equipo" name="equipo"> <option value="1">Boca Juniors</option> <option value="2">Tigre</option> <option value="3">Belgrano</option> <option value="4">Flamengo</option> <option value="5">Riber</option> </select> </form Formularios - Checkbox <form action="" method="post"> <label for="equipo">Equipos que descendieron:</label> <br/> <input type="checkbox" name="e1"> Boca<br> <input type="checkbox" name="e2"> Riber<br> <input type="checkbox" name="e3"> Racing<br> <input type="checkbox" name="e4"> Independiente<br> <input type="checkbox" name="e5"> San Lorenzo<br> </form Formularios - Radio <form action="" method="post" enctype="multipart/form-data > <label for="categoria">Categoría:</label> <br/> <input type="radio" name="categoria">Grande <input type="radio" name="categoria">Chico </form Formularios - File <form action="" method="post" enctype="multipart/form-data> <label for="archivo">Suba el escudo de su equipo:</label> <br/> <input type="file" id="escudo" name="escudo"> </form>
