¿Cómo construir entradas de estilo de texto para su html5 y css3 páginas web basadas

La mayoría de los elementos de formulario en HTML5 y CSS3 páginas web son variaciones de la misma etiqueta. La etiqueta puede crear cuadros de una sola línea de texto, cuadros de contraseña, botones y contenido, incluso invisibles (como campos ocultos). La mayoría de estos objetos comparten los mismos atributos básicos, aunque el aspecto exterior puede ser diferente.

Como hacer un campo de texto estándar

La forma más común del elemento de entrada es una campo de texto plano.

Para hacer una entrada de texto básico, necesita una forma y un elemento de entrada. Adición de una etiqueta de modo que el usuario sabe lo que tiene que entrar en el cuadro de texto es también común. Aquí está el código:

textbox.html

Un elemento de entrada tiene tres atributos comunes:

  • tipo: los tipo atributo indica el tipo de elemento de entrada es esto. Este primer conjuntos ejemplo tipo a texto, la creación de un cuadro de texto estándar. Otros tipos crean contraseñas, campos ocultos, casillas de verificación y botones.

  • carné de identidad: los carné de identidad atributo crea un identificador para el campo. Cuando se utiliza un lenguaje de programación para extraer datos de este elemento, el uso carné de identidad para especificar qué campo que usted se refiere. Un carné de identidad campo a menudo comienza con una frase pista para indicar el tipo de objeto que es (por ejemplo, TXT indica un cuadro de texto).

  • valor: Este atributo determina el valor por defecto del cuadro de texto. Si deja este atributo a cabo, el campo de texto comienza vacío.

Los campos de texto también pueden tener otros atributos, que no se utilizan tan a menudo, como

  • tamaño: Este atributo determina el número de caracteres que se muestran.

  • longitud máxima: Utilice este atributo para establecer el mayor número de caracteres que se permiten.

No hay ninguna etiqueta. etiquetas de entrada son un vestigio de los días en que muchas etiquetas no tienen códigos de finalización. Que acaba de terminar la etiqueta original con un carácter de barra, como se muestra en el código de ejemplo anterior.

Usted podría preguntarse por qué se ha añadido la etiqueta si no tiene ningún efecto en la apariencia o el comportamiento de la forma. En este ejemplo concreto, la etiqueta no tiene un efecto, pero como todo en HTML, puede hacer cosas increíbles con estilo en CSS. A pesar de que las etiquetas no suelen tener un estilo predeterminado, que siguen siendo útiles.

¿Cómo construir un campo de contraseña

Las contraseñas son como cuadros de texto, excepto que no se muestra el texto. En su lugar, aparece una serie de asteriscos.

El siguiente código revela que las contraseñas son casi idénticos a los campos de texto normales:

password.html

En este ejemplo, un campo de contraseña se creó con la ID. El valor predeterminado de este campo es. El termino secreto será en realidad no aparecerá en campo- será reemplazado con seis asteriscos.

El campo de la contraseña ofrece prácticamente ninguna seguridad significativo. Se protege al usuario de los satélites espía de mirar por encima del hombro para leer una contraseña, pero eso es todo. Los estándares abiertos de HTML y los lenguajes de programación significan las contraseñas se pasan a menudo a la intemperie. Hay soluciones - como la tecnología SSL - pero por ahora, sólo tenga en cuenta que el campo de contraseña no es adecuado para la protección de sus secretos.

Este ejemplo en realidad no hace nada con la contraseña, pero se va a utilizar otras tecnologías para eso.

Cómo hacer que la entrada de texto de varias líneas

El campo de texto de una sola línea es una característica de gran alcance, pero a veces, usted quiere algo con un poco más de espacio. El programa demuestra cómo se puede crear una página para una pregunta de ensayo.

La estrella de este programa es una nueva etiqueta -:

essay.html

Aquí hay algunas cosas a tener en cuenta al utilizar la etiqueta:

  • Se necesita anattribute, al igual que un elemento de entrada.

  • Puede especificar los withandattributes tamaño.

  • El contenido va entre las etiquetas. El área de texto puede contener mucha más información que las etiquetas normales, por lo que en lugar de colocar los datos en el atributo, el contenido del texto va entre las etiquetas y.

Cualquier cosa colocada entre y en el código termina en la salida, también. Esto incluye espacios y retornos de carro. Si no desea ningún espacio en blanco en el área de texto, coloque la etiqueta final, justo al lado de la etiqueta de inicio.

Artículos Relacionados