Muy buenas a tod@s. En la última entrada, os hablaba de como hacer la base de un formulario y usar esos datos dentro o fuera de nuestra página en Formularios en HTML:envio y guardado de datos.

 

Vamos a empezar a ver las distintas partes del formulario, los campos que nos rellenarán los usuarios. Concretamente hoy empezaremos con una etiqueta muy util: input, con esta etiqueta podemos hacer bastantes cosas si en su atributo type le indicamos el tipo distinto que queremos.

 

La sintaxis para esta etiqueta como para todas las demás <input>, pero deberemos indicarle el atributo type y name, type para el tipo y name para luego en la recogida del envio de datos saber exactamente a lo que nos estamos refiriendo. Eso como básico. Luego se le pueden indicar mediante más atributos como value, lo que queremos que ponga(si queremos que ponga algo).

 

La más simple seria type=”text” , un ejemplo de un input tipo texto podria ser pedir el nombre

<input type=”text” name=”nombre” value=”Nombre”>

Que nos quedaría así:

Si además queremos que se borre al pinchar podemos meter dentro de la etiqueta onFocus=”this.value=””, pongo comillas simples en this.value=’ ‘ para que se vacie, si queremos que al pinchar ponga otra cosa también podemos introducirlo en las comillas.

<input type=”text” name=”nombre” value=”Nombre” onFocus=”this.value=””>

y nos quedaría así:

Si queremos que nuestra caja de texto tenga un tamaño concreto usaremos el atributo size dentro de nuestra etiqueta input. Con esto indicamos solo la longitud de la caja

Y para limitar el número de caracteres usaremos maxlength, por ejemplo si no aceptasemos nombres más largos de 10 letras, pondriamos maxlength=”10″

 

Otra opción para el input de tipo solo numérico, que se escribiria como type=”number”, util por ejemplo para recoger la edad o el número de telefono.

<input type=”number” name=”telefono” value=”666000666″ onFocus=”this.value=””>

y quedaría asi, como podeis comprobar no acepta letras, solo números:

 

Si lo que queremos es un campo para una contraseña y que se oculten los caracteres que vamos escribiendo el atributo type debera tomar el valor password type=”password”

<input type=”password” name=”pass” value=”Contraseña” onFocus=”this.value=””>

Como podeis ver el valor contraseña directamente lo oculta y si escribis seguirá ocultando lo que escribais

 

Ahora ya sabemos como crear una caja de texto básico, ya sea de tipo texto, numérica o para una contraseña; darle un valor para que se vea clara y que al pinchar se borre para que puedan introducir los datos sin la molestia de estar borrando, pero esto no acaba aquí. Con la etiqueta input aún se pueden crear muchas mas cosas que las iremos viendo en los siguientes post, pero hasta aqui por hoy. Espero como siempre, que os haya servido de ayuda.

Un saludo a tod@s

Quizás pueda interesarte

Suscríbete a nuestro boletín

 

 

Política de Privacidad

Revisa tu correo electrónico para finalizar el registro

Advertisment ad adsense adlogger