Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas.
Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus características.
Las cajas de texto básicas: <input type= “text”>
La caja de texto básica se escribiría de la siguiente forma:
<input type="text" name="nombredelacaja">
y su apariencia sería la siguiente:
Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas.
Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda.
maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength.
value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo.
name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue.
Mira el siguiente código:
<input type="text" size="15" maxlength="30" value="Nombre" name="nombre">
Aquí vemos un tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30. Además, tiene un texto preescrito en él. El resultado sería el siguiente:
Si quieres verlo en una página web, un buen ejemplo de ello lo encontramos en el portal SalasDeChatGratis, donde encontramos diferentes salas de chat de múltiples temáticas, y cada una de las salas presenta un área de texto en la que podemos escribir el nombre o el nick que deseemos usar en la sala de chat a la que queramos acceder.
Campos de texto largo: <textarea>
Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.
Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto.
Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo.
Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente:
<textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>
Y se vería de la siguiente forma:
Textos con passwords
En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece.
El siguiente código es de un campo con datos codificados:
<input type="password" name="contraseña">
Y este sería el resultado obtenido:
Buen artículo.
ht
Es el sistema de comentario de WordPress pero con diseño hecho a medida, al igual que el resto de la página.
Excelente información. Gracias.
Muy bien gracias por tu comentario saludos eso nos ayuda mucho para laborar nuestras páginas web y para todo novato y que quiere sobre salir gracias saludos…
Me gusto mucho.
Buen post.
Gracias por la información.
Excelente post.
Excelente.
Excelente, me sirvió muchísimo.
Hola, muy bien.
Hola, super.
Chingo me ayudo a aprender. Por favor agrega como guardar los datos de user name y password en un archivo.
Muy bien
Te agradezco la información y las opciones que me he podido anotar para utilizar estas cajas.
Estaba buscando hace tiempo estos ejemplos.
Gracias me ayudaste mucho
Excelente la forma de enseñar a hacer formularios. Es una manera muy facil, gracias por compartir
Me ayudó mucho
Gracias
Muy bueno tus aportaciones para familiarizarnos con este tipo de objetos necesarios para el HTML5
Excelente post para clarificar las ideas de HTML5, es importante tener una buena estructura de este lenguaje de marcas para poder posicionar tu pagina lo mas alto posible. Y los campos de texto son importantes para los formularios.
saludos
Me ayudo bastante, queria colocar una caja con un texto para poner un boton abajo para mandarlo al sitio principal. Me sirvio bastante, aunque solo quedaria saber como poner algun color en el borde. Gracias.
Hola, pero me gustaria saber si esto se aplica de una manera facil en wordpress… no entiendo como ponerlo una caja de comentarios perosnalizada… muchas gracias!! saludos
muchas gracias
Post excelente para crear formularios y crear feedback para tu sitio web.
El password tienes razon que se han dejar como asteriscos.
Muy buenos cursos
Me ayudo mucho, muchas gracias
Me ayudó mucho gracias, tengo una duda, ¿Cómo puedo hacer para que el comentario se guarde?
Cuando quiero escribir sobre el campo de texto me direcciona a otra pagina del proyecto que estoy creando en html.
Como hago para colocar el texto o el titulo del cajón al lado izquierdo del mismo