Elementos de Formulario HTML

GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Elementos de Formularios HTML
El Elemento <input>
El Elemento de formulario más Importante es el elemento <input>. El elemento <input> se
puede mostrar de varias maneras, dependiendo del valor del atributo type.
Si se omite el atributo type , el campo de entrada obtiene el tipo predeterminado: "texto".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h2>El elemento INPUT</h2>
<form action="/pagina_accion.php">
Ingrese su nombre:<input type="text" name="nombre" value=""><br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Código 104.html
El elemento <select>
El elemento <select> define una lista desplegable:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>El elemento SELECT</h2>
<p>El elemento SELECT define una lista desplegable:</p>
<select name="autos">
<option value="ford">Ford</option>
<option value="chevrolet">Chevrolet</option>
<option value="fiat">Fiat</option>
</select>
<br><br>
</form>
</body>
</html>
Código 105.html
GERENCIA VIRTUAL
El elemento <option> define una opción que puede seleccionarse, de manera predeterminada, se
selecciona el primer elemento de la lista desplegable.
Para definir una opción preseleccionada, añadir el atributo selected para la opción:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Opción pre seleccionada</h2>
<p>Pre seleccionamos una opción con el atributo SELECTED</p>
<p>Para este caso pre seleccionamos la opción FIAT</p>
<select name="autos">
<option value="fiat" selected>Fiat</option>
</select>
<br><br>
</form>
</body>
</html>
Código 106.html
Valores visibles
Utilice el atributo size se utiliza para especificar el número de valores visibles:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Opciones visibles</h2>
<p>Utilizamos atributo SIZE para determinar el número de opciones a mostrar</p>
<select name="autos" size="3">
<option value="Hyundai">Hyundai</option>
</select><br><br>
</form>
</body>
</html>
Código 107.html
GERENCIA VIRTUAL
Permitir selecciones múltiples

Utilice el atributo multiple para permitir al usuario seleccionar más de un valor.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Permitir selección múltiple</h2>
<p>Utilizamos atributo MULTIPLE para permitir selección múltiple</p>
<select name="autos" size="4" multiple>
<option value="hyundai">Hyundai</option>
</select><br><br>
</form>
<p>Mantenga presionado el botón Ctrl (Windows) / Command (Mac) para realizar
selección múltiple con el ratón</p>
</body>
</html>
Código 108.html
El elemento <textarea>
El <textarea> elemento define un campo de entrada de líneas múltiples (un área de texto )
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Textarea</h2>
<p> Define un campo de entrada de líneas múltiples</p>
<textarea name="mensaje" rows="10" cols="30">
Su mensaje:</textarea><br><br>
</form>
</body>
</html>
Código 109.html
GERENCIA VIRTUAL
El atributo rows especifica el número visible de líneas en un área de texto y el atributo cols
especifica la anchura visible de un área de texto.
También puede definir el tamaño del área de texto mediante el uso de CSS
<textarea name="mensaje" style="width:200px; height:600px;">Su mensaje:</textarea>
El Elemento <button>
El elemento <button> define un botón para hacer click.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>El elemento botón</h2>
<button type="button" onclick="alert('Prueba de botón!!!')"> Haz click</button>
</form>
</body>
</html>
Código 110.html
Nota: Es conveniente especificar el tipo de atributo para el elemento botón, ya que los diferentes
navegadores pueden usar diferentes tipos de atributo predeterminados para el elemento botón.
Elementos de formulario HTML 5

HTML5 añade los siguientes elementos de formulario:
 <datalist>
 <output>
Nota: Cuando los navegadores no muestran elementos desconocidos, ni elementos no

compatibles, se debe a ser antiguos al diseño o código de su página web.
GERENCIA VIRTUAL
HTML5 elemento <datalist>

El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>.
Los usuarios podrán ver una lista desplegable de las opciones predefinidas, ya que los datos de
entrada.
El atributo list del elemento <input>, debe hacer referencia al atributo id del
elemento <datalist>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>El elemento DATALIST</h2>
<p>El elemento datalist especifica una lista de opciones predefinidas para un
elemento INPUT</p>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<p>Nota: La etiqueta datalist no es soportada por Safari e IE9 o versiones
anteriores</p>
</body>
</html>
Código 111.html
HTML5 <output>
El elemento <output> representa el resultado de un cálculo (como uno realizado por un script).
GERENCIA VIRTUAL
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>El elemento OUTPUT</h2>
<p>El elemento OUTPUT representa resultados de cálculo</p>
<form action="/pagina_accion.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>
</form>
<p>Nota: El elemento OUTPUT no es soportado por Edge12 e Internet Explorer</p>
</body>
</html>
Código 112.html
Elementos de formulario en HTML5

Etiqueta Descripción
<form> Define un formulario en HTML.
<input> Define un campo de entrada de datos.
<textarea> Define campo de entrada de múltiples líneas de datos.
<label> Define una etiqueta para un elemento <input>.
<fieldset> Agrupa datos relacionados en un formulario.
<legend> Define una leyenda para un grupo de datos relacionados o <fieldset>.
<select> Define una lista desplegable.
<optgroup> Define un grupo de opciones relcionadas en una lista desplegable.
<option> Define una opción de una lista desplegab.
<button> Define un botón activo o “clickable”.
<datalist> Especifica una lista de opciones predefinidas para entrada de datos.
<output> Define los resultados de un cálculo a ser ingresado como dato.

Elementos de Formulario HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Elementos de Formulario HTML

Încărcat de

Drepturi de autor:

Formate disponibile

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Elementos de Formularios HTML

Permitir selecciones múltiples

<textarea name="mensaje" style="width:200px; height:600px;">Su mensaje:</textarea>

Elementos de formulario HTML 5

Nota: Cuando los navegadores no muestran elementos desconocidos, ni elementos no

HTML5 elemento <datalist>

Elementos de formulario en HTML5

<form> Define un formulario en HTML.

<input> Define un campo de entrada de datos.

<textarea> Define campo de entrada de múltiples líneas de datos.

<label> Define una etiqueta para un elemento <input>.

<fieldset> Agrupa datos relacionados en un formulario.

<legend> Define una leyenda para un grupo de datos relacionados o <fieldset>.

<select> Define una lista desplegable.

<optgroup> Define un grupo de opciones relcionadas en una lista desplegable.

<option> Define una opción de una lista desplegab.

<button> Define un botón activo o “clickable”.

<datalist> Especifica una lista de opciones predefinidas para entrada de datos.

<output> Define los resultados de un cálculo a ser ingresado como dato.

S-ar putea să vă placă și