<form>
.
form elements
.
</form>
Input element
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
type text
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
target atribute
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
_blank
<form action="/action_page.php" target="_blank">
El método HTTP predeterminado al enviar datos de formulario es GET
<form action="/action_page.php" target="_blank" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Método GET
Agrega los datos del formulario a la URL, en pares de nombre/valor
-¡NUNCA utilice GET para enviar datos confidenciales! (¡Los datos del formulario enviado son visibles en la URL!)
-La longitud de una URL es limitada (2048 caracteres)
-Útil para envíos de formularios donde un usuario desea marcar el resultado como favorito
-GET es bueno para datos no seguros, como cadenas de consulta en Google
autocomplete atributo especifica si un formulario debe tener activado o desactivado el autocompletado.
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
El novalidatebatributo es un atributo booleano.
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
Form atributes
accept-charset Specifies the character encodings used for form submission
action Specifies where to send the form-data when a form is submitted
autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form
form elements
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
select lista desplegable
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option>elemento define una opción que se puede seleccionar.
<option value="fiat" selected>Fiat</option>
size atributo para especificar el número de valores visibles
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
multiple atributo para permitir al usuario seleccionar más de un valor
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea>elemento define un campo de entrada de varias líneas (un área de texto)
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
<button>elemento define un botón en el que se puede hacer clic
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<fieldset> elemento se utiliza para agrupar datos relacionados en un formulario
<legend>elemento define un título para el <fieldset> elemento
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<datalist>elemento especifica una lista de opciones predefinidas para un <input>elemento.
list atributo del <input>elemento, debe hacer referencia al idatributo del <datalist>elemento.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<output>elemento representa el resultado de un cálculo (como uno realizado por un script).
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Elementos del formulario
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
