Documentos de Académico
Documentos de Profesional
Documentos de Cultura
https://developer.mozilla.org/es/docs/Learn/Forms/Your_first_form#%C2%BFqu
%C3%A9_son_los_formularios_web
Prerrequisitos
Conocimientos básicos de informática y de lenguaje HTML.
:
Familiarizarse con los formularios web, para qué se usan, cómo diseñarlos y qué elementos HTML
Objetivo:
sencillos.
Antes de continuar, haz una copia local de nuestra plantilla HTML simple: introduce
aquí tu formulario HTML.
El elemento <form>
</form>
Los elementos <label>, <input> y <textarea>
>ul<
>li<
>label for="name">Nombre:</label<
>li/<
>li<
>li/<
>li<
>label for="msg">Mensaje:</label<
>li/<
>ul/<
>form/<
Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control
del formulario y permite que los usuarios con ratón, panel táctil y dispositivos
táctiles hagan clic en la etiqueta para activar el control correspondiente, y también
proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus
usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en Cómo
estructurar un formulario web.
<input type="text" value="por defecto este elemento se llena con este texto">
<textarea>
</textarea>
El elemento <button>
<li class="button">
</li>
Nota: Si crees que no has escrito bien el código HTML, compáralo con nuestro
ejemplo final: véase first-form.html (ver en vivo).
Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del
alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle,
por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS
para que se vea un poco bien.
</style>
form {
margin: 0 auto;
width: 400px;
padding: 1em;
border-radius: 1em;
ul {
list-style: none;
padding: 0;
margin: 0;
form li + li {
margin-top: 1em;
}
label {
display: inline-block;
width: 90px;
text-align: right;
input,
textarea {
width: 300px;
box-sizing: border-box;
}
input:focus,
textarea:focus {
border-color: #000;
textarea {
vertical-align: top;
height: 5em;
.button {
button {
margin-left: .5em;
Para poner nombre a los diversos datos que se introducen en un formulario, debes
usar el atributo name en cada control de formulario que recopila un dato específico.
Veamos de nuevo algunos de nuestros códigos de formulario:
<ul>
<li>
<label for="name">Nombre:</label>
</li>
<li>
<li>
<label for="msg">Mensaje:</label>
</li>
...
Resumen
¡Enhorabuena!, has creado tu primer formulario web. Debería verse así:
Pero esto es solo el comienzo: ahora ha llegado el momento de profundizar en el
tema. Los formularios tienen mucho más potencial de lo que hemos visto aquí y los
artículos siguientes de este módulo te ayudarán a dominarlo.