Vamos a crear un formulario y explicaré paso a paso cada linea.
- Código: Seleccionar todo
<form action="index.html" method="post" name="userlogin">
<fieldset>
<legend>Login de usuario</legend>
<label for="usuario">> usuario</label>
<input class="inputu" type="text" accesskey="u" id="usuario" tabindex="1" /><br />
<label for="password">> password</label>
<input class="inputpa" id="password" accesskey="p" type="password" tabindex="2"/>
<input type="submit" class="btnacceder" value="Entrar" tabindex="3" /><br />
<label class="forgotpass">¿Has olvidado tu contraseña?.Indicanos el mail y te enviamos una nueva clave.</label>
<input class="forgot" type="text" id="forgotpass" accesskey="f" tabindex="4" />
<input type="submit" class="btnforgot" value="Reenviar" tabindex="5"/>
</fieldset>
</form>
En primer lugar, abrimos la etiqueta form con sus respectivos atributos: action, method y name.
El action indica el tipo de acción que se va a realizar. Podemos establecer un correo electrónico o una URI.
El method puede ser POST o GET. De momento no entraré en detalle entre estos dos métodos.
El name me sirve para saber que elemento estoy tratando y como trabajar datos acccediendo mediante el name. No es igual que ID.
La etiqueta fieldset agrupa campos que están relacionados. En este caso como se trata de un formulario de login de usuario, agrupamos los campos posibles, que son: usario, contraseña y un último campo donde se pide que se introduzca el mail para recuperar la contraseña. Si el formulario tratase de registro de usuario, deberiamos usar la etiqueta fieldset para agrupar : datos personales, datos de usuario, etc etc.
Seguido de fieldset nos encontramos con label. Aunque se usa para radios y checkbox , también se usan en todos los campos del formulario. Esta etiqueta se encarga de dar informacion del control al que esta asociado. Por ejemplo :
- Código: Seleccionar todo
<label for="usuario">Usuario</label>
Seguido de un campo de texto
- Código: Seleccionar todo
<input class="inputu" type="text" accesskey="u" id="usuario" tabindex="1" />
Si nos fijamos en el input text, vemos ciertos atributos interesantes. Entre ellos: accesskey y tabindex.
Accesskey es un atajo de teclado. Le indicamos una tecla y podremos acceder al elemento, mediante la combinacion alt+tecla.
Tabindex. Permite desplazarse con el tabulador. Sigue un orden numerico de menos a más.
Y con esto, ya tenemos formularios accesibles, válidos y funcionales para todos.
Saludos.
