Cómo modificar el tamaño de un cuadro de texto

Escrito por foye robinson | Traducido por paulo gutierrez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo modificar el tamaño de un cuadro de texto
Puedes alinear cuadros de texto para organizar formularios en una página web. (Hemera Technologies/AbleStock.com/Getty Images)

Los cuadros de texto te ayudan a recopilar datos desde un formulario web. Puedes cambiar el tamaño de tu cuadro de texto para ajustarlo un área de tu página o alinearlo con otros cuadros de texto que hayas creado. La etiqueta de entrada te permite crear, nombrar y cambiar el tamaño de los cuadros de texto de una página web. Puedes manipular el ancho de un cuadro de texto con lenguaje de marcas de hipertexto (HTML, por sus siglas en inglés) o su alto y ancho con el lenguaje de hojas de estilo en cascada (CSS, por sus siglas en inglés).

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

    Cambiar el tamaño con CSS

  1. 1

    Abre un editor de texto, como Bloc de notas, TextPad o EditPad. Selecciona "Archivo" y "Abrir" desde el menú. Haz doble clic sobre el archivo HTML que contiene el cuadro de texto al que deseas cambiarle el tamaño.

  2. 2

    Agrega el siguiente estilo entre la etiqueta <HEAD></HEAD> para cambiar las dimensiones del cuadro de texto. El siguiente cuadro de texto tiene un alto de 50 píxeles y un ancho de 200 píxeles. Para usar un tamaño diferente, cambia el valor del alto (height) y el ancho (width).

    <style type="text/css"> <!-- .myinput { width:200px; height:50px; } --> </style>

  3. 3

    Desplázate hasta la etiqueta <BODY> y encuentra el código HTML para el cuadro de texto. Será similar a:

    <input type="text" name="FirstName" size="20" />

  4. 4

    Mantén '<input type="text" name="FirstName" />' pero remueve 'size="20"' del código. Agrega el nombre de clase ("myinput") desde el estilo que creaste, para que luzca como esto:

    <input type="text" name="FirstName" class="myinput" />

  5. 5

    Repite el paso anterior para cambiar el tamaño de cuadros de texto adicionales. Todos los cuadros de texto que incluyan 'class="myinput"' cambiarán su tamaño automáticamente en la página.

  6. 6

    Selecciona "Archivo" y "Guardar" para actualizar tu página.

    Cambiar el tamaño con HTML

  1. 1

    Ejecuta tu editor de texto favorito, como Bloc de notas, TextPad o EditPad. Selecciona "Archivo" y "Abrir" desde el menú. Haz doble clic sobre el archivo HTML que deseas modificar.

  2. 2

    Desplázate hasta el código HTML para el cuadro de texto. Será similar al siguiente:

    <input type="text" name="minombre" size="20" />

  3. 3

    Cambia el valor de "size" por el tamaño que deseas establecer. Por ejemplo, para establecer el largo en "40", usa lo siguiente:

    <input type="text" name="minombre" size="40" />

  4. 4

    Selecciona "Archivo" y "Guardar" desde el menú para guardar tus cambios.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles