Scribd
Cargar
13 vistas

HTML Formularios

Cargado por

Carlos Gpt
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
13 vistas

HTML Formularios

Cargado por

Carlos Gpt
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 57

Aprende formularios HTML construyendo un formulario de registro.

Puedes hacer uso de formularios HTML para recopilar información de las


personas que visitan tu página web.

En este curso, aprenderás formularios de HTML construyendo una página de


registro. Aprenderás cómo controlar qué tipo de datos pueden colocarse en tu
formulario, y herramientas nuevas de CSS para cambiar el diseño de tu página.
Paso 1
¡Bienvenido al proyecto de formulario de registro! Comience añadiendo la
declaración !DOCTYPE html en la parte superior del documento para que el
navegador sepa qué tipo de documento lee.

<!DOCTYPE html>

Paso 2
Abajo del DOCTYPE, añade un elemento html con un
atributo lang establecido a en, para que tengas espacio para comenzar a
poner código.

<!DOCTYPE html>
<html lang="en">
</html>
Paso 3
A continuación, agrega las etiquetas de apertura y cierre de las
etiquetas head y body dentro del elemento html.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>

Paso 4
Añade un title y un elemento meta al head. Dale a tu proyecto un título
de Registration Form, y dale un atributo charset con el valor UTF-8 a tu
elemento meta.

<head>
<title>Registration Form</title>
<meta charset="UTF-8">
</head>

Paso 5
Anida un elemento link de cierre automático dentro del elemento head.
Dale un atributo rel con el valor stylesheet y un atributo href con un valor
de styles.css.

<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Registration Form</title>
</head>

Paso 6
Dentro del body, proporciona un contexto de encabezado para el
contenido, agregando un h1 con el texto Registration Form.

<body>
<h1>Registration Form</h1>
</body>

Paso 7
Debajo del encabezado, utilice el siguiente texto dentro de un elemento
de párrafo para animar a los usuarios a registrarse:

Please fill out this form with the required information

<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
</body>

Paso 8
La unidad vh significa viewport height (altura de la ventana gráfica), y es
relativa al 1% de la altura (height) del viewport.

Es hora de engalanar el proyecto con un poco de CSS. Comienza


estableciendo para body la propiedad width a 100%, y la
propiedad height a 100vh.

body {
width: 100%;
height: 100vh;
}

Paso 9
Ahora, deshazte de la barra de desplazamiento horizontal, estableciendo
el margin por defecto del body añadido por algunos navegadores a 0.

body {
width: 100%;
height: 100vh;
margin: 0;
}

Paso 10
Eso es mejor. Ahora, haz que el fondo sea fácil de ver, cambiando
el body background-color a #1b1b32. Luego, para ver el texto, cambia
el color a #f5f6f7.

body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
VISTA PREVIA

Paso 11
Como sugiere el título, estás creando un formulario. Por lo tanto, después
del elemento p inserta un form con un atributo de action apuntando
a https://register-demo.freecodecamp.org.

<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<!-- El atributo action indica dónde se deben enviar los datos del formulario. -->
<form action="https://register-demo.freecodecamp.org">
</form>
</body>
Paso 12
El atributo method especifica cómo enviar datos de formulario a la
dirección URL especificada en el atributo action. Los datos del formulario
se pueden enviar a través de una solicitud GET como parámetros de URL
(con method="get") o mediante una solicitud POST como datos en el cuerpo
de la solicitud (con method="post").

Establezca el atributo method para enviar los datos del formulario a través
de una solicitud POST.

<form
action='https://register-demo.freecodecamp.org' method="post">
</form>

Paso 13
Como el formulario tiene tres secciones distintas, agrega tres
elementos fieldset dentro del elemento form.

<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form
method="post" action='https://register-demo.freecodecamp.org'>
<fieldset></fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
</form>
</body>
VISTA PREVIA

Paso 14
El primer fieldset contendrá los campos de nombre, email y contraseña.
Empieza agregando cuatro elementos label al primer fieldset.

<form method="post" action='https://register-


demo.freecodecamp.org'>
<fieldset>
<label></label>
<label></label>
<label></label>
<label></label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
</form>
Paso 15
Agrega el siguiente texto a los elementos label:

 Enter Your First Name:


 Enter Your Last Name:
 Enter Your Email:
 Create a New Password:

<fieldset>
<label>Enter Your First Name:</label>
<label>Enter Your Last Name:</label>
<label>Enter Your Email:</label>
<label>Create a New Password:</label>
</fieldset>

VISTA PREVIA
Paso 16
La unidad rem significa root (raíz) em, y es relativa al tamaño de fuente del
elemento html.

Como los elementos label por defecto son inline, se muestran todos
juntos en la misma línea, haciendo difícil su lectura. Para mostrarlos en
diferentes líneas, añade display: block al elemento label, y dale a la
propiedad margin un valor de 0.5rem 0, para darles un poco de separación.

label {
display: block;
margin: 0.5rem 0;
}

VISTA PREVIA
Paso 17
Anida un elemento input dentro de cada label. Asegúrate de agregar
cada input después del texto del label, e incluye un espacio después de
los dos puntos.

<fieldset>
<label>Enter Your First Name: <input></label>
<label>Enter Your Last Name: <input></label>
<label>Enter Your Email: <input></label>
<label>Create a New Password: <input></label>
</fieldset>

VISTA PREVIA
Paso 18
Siguiendo las mejores prácticas de accesibilidad, vincule los
elementos input y los elementos label utilizando el atributo for.

Utiliza first-name, last-name, email y new-password como valores para los


respectivos atributos id.

<fieldset>
<label for="first-name">
Enter Your First Name: <input id="first-name"/>
</label>
<label for="last-name">
Enter Your Last Name: <input id="last-name"/>
</label>
<label for="email">
Enter Your Email: <input id="email"/>
</label>
<label for="new-password">
Create a New Password: <input id="new-password"/>
</label>
</fieldset>

Paso 19
Especificar el atributo type de un elemento de formulario es importante
para que el navegador sepa qué tipo de datos debe esperar. Si el type no
está especificado, el navegador utilizará por defecto text.

Da a los dos primeros elementos input un atributo type de text, al tercero


un atributo type de email y al cuarto un atributo type de password.

El type email solo permite correos electrónicos con un @ y un . en el


dominio. El type password oculta la entrada, y advierte si el sitio no utiliza
HTTPS.
<fieldset>
<label for="first-name">
Enter Your First Name: <input id="first-name" type="text"/>
</label>
<label for="last-name">
Enter Your Last Name: <input id="last-name" type="text"/>
</label>
<label for="email">
Enter Your Email: <input id="email" type="email"/>
</label>
<label for="new-password">
Create a New Password: <input id="new-password" type="password"/>
</label>
</fieldset>

Paso 20
Al primer elemento input se le establece un type de submit
automáticamente para enviar a su elemento form padre más cercano.

Para manejar el envío del formulario, después del último


elemento fieldset agrega un elemento input con el
atributo type establecido en submit y el atributo value establecido
en Submit.

<fieldset>
<label for=”first-name”>Enter Your First Name: <input id=”first-
name” type=”text” />
</label>
<label for=”last-name”>Enter Your Last Name: <input id=”last-
name” type=”text” />
</label>
<label for=”email”>Enter Your Email: <input id=”email” type=”email
” />
</label>
<label for=”new-password”>Create a New Password: <input id=”new-
password” type=”password” />
</label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
<input type=”submit” value=”Submit”/>

VISTA PREVIA

Paso 21
En este punto, deberías poder enviar el formulario. Sin embargo, puede
notar que no pasa casi nada.

Para hacer el formulario más interactivo, agrega el atributo required a los


elementos input en el primer fieldset.

Ahora, si intentas enviar el formulario sin rellenar los campos requeridos,


verá un mensaje de error.
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-
name" type="text" required/>
</label>
<label for="last-name">Enter Your Last Name: <input id="last-
name" type="text" required/>
</label>
<label for="email">Enter Your Email: <input id="email"
type="email" required/>
</label>
<label for="new-password">Create a New Password: <input id="new-
password" type="password" required/>
</label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
<input type="submit" value="Submit" />

Paso 22
Algunos valores del atributo type vienen con una validación de formulario
incorporada. Por ejemplo, type="email" requiere que el valor sea una
dirección de correo electrónico válida.

Agrega validación personalizada al elemento input de contraseña,


agregando un atributo minlength con un valor de 8. De este modo se evita
que se envíen entradas de menos de 8 caracteres.

<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-
name" type="text" required />
</label>
<label for="last-name">Enter Your Last Name: <input id="last-
name" type="text" required />
</label>
<label for="email">Enter Your Email: <input id="email" type="ema
il" required />
</label>
<label for="new-password">Create a New Password: <input id="new-
password" type="password" minlength="8" required />
</label>
</fieldset>

Paso 23
Con el type="password" puedes usar el atributo pattern para definir una
expresión regular que la contraseña debe coincidir para ser considerada
válida.

Agrega un atributo pattern al elemento input de contraseña para requerir


que la entrada coincida con: [a-z0-5]{8,}

Lo anterior es una expresión regular que coincide con ocho o más letras
minúsculas o los dígitos del 0 al 5. Luego, elimina el atributo minlength, y
pruébalo.

<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-
name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-
name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email
" required /></label>
<label for="new-password">Create a New Password: <input id="new-
password" type="password" pattern="[a-z0-5]{8,}" required /></
label>
</fieldset>
Paso 24
Pasemos a la siguiente parte del formulario de registro. Esta sección
preguntará por el tipo de cuenta que el usuario está abriendo, y
confirmará que el usuario ha leído los términos y condiciones.

Empieza agregando tres elementos label al segundo fieldset.

<fieldset>
<label></label>
<label></label>
<label></label>
</fieldset>

VISTA PREVIA
Paso 25
Los usuarios podrán elegir entre una Personal Account o una Business
Account.

Para ello, dentro de cada uno de los dos primeros elementos label,
agrega un elemento input con el type="radio".

<fieldset>
<label><input type="radio"></label>
<label><input type="radio"></label>
<label></label>
</fieldset>

VISTA PREVIA

Paso 26
Para los términos y condiciones, agrega un input con
un type de checkbox al tercer elemento label. Hacer este
elemento input required porque los usuarios no deben registrarse sin leer
los términos y condiciones.

<fieldset>
<label><input type="radio" /></label>
<label><input type="radio" /></label>
<label><input type="checkbox" required></label>
</fieldset>

VISTA PREVIA

Paso 27
Dentro de cada elemento label correspondiente, e inmediatamente
después de cada elemento input, añade un espacio y agrega el siguiente
texto:

Personal Account
Business Account
I accept the terms and conditions

<fieldset>
<label><input type="radio" /> Personal Account</label>
<label><input type="radio" /> Business Account</label>
<label><input type="checkbox" required /> I accept the ter
ms and conditions</label>
</fieldset>

VISTA PREVIA

Paso 28
Solo quieres que se pueda seleccionar un input de radio a la vez. Sin
embargo, el formulario no sabe que los inputs de radio están
relacionadas.

Para relacionar los inputs de radio, dales el mismo atributo name con un
valor de account-type. Ahora, no es posible seleccionar ambos inputs de
radio al mismo tiempo.

<fieldset>
<label><input type="radio" name="account-
type" /> Personal Account</label>
<label><input type="radio" name="account-
type"/> Business Account
</label>
<label><input type="checkbox" required /> I accept the terms and c
onditions
</label>
</fieldset>

Paso 29
Siga las mejores prácticas de accesibilidad vinculando los
elementos input y los elementos label en el segundo fieldset.

Utiliza personal-account, business-account y terms-and-conditions como


valores para los respectivos atributos id.

<fieldset>
<label for="personal-account"><input type="radio" nam
e="account-type" id="personal-account"/> Personal Account</label>
<label for="business-account"><input type="radio" nam
e="account-type" id="business-account"/> Business Account</label>
<label for="terms-and-conditions"><input type="checkbox" r
equired id="terms-and-conditions"/> I accept the terms and conditi
ons</label>
</fieldset>

Paso 30
Para terminar este fieldset, vincula el texto terms and conditions en la
tercera label a la siguiente ubicación:

https://www.freecodecamp.org/news/terms-of-service/

<fieldset>
<label for="personal-account"><input id="personal-account"
type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account"
type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions"><input id="terms-and-
conditions" type="checkbox" required /> I accept the <a hre
f="https://www.freecodecamp.org/news/terms-of-service/">terms and
conditions</a></label>
</fieldset>

VISTA PREVIA

Paso 31
Pasando al último fieldset. ¿Qué pasa si quisieras permitir que un
usuario suba una foto de perfil?

Bueno, el input con tipo file permite eso. Agrega un label con el
texto Upload a profile picture: y anida un input aceptando la carga de un
archivo.

<fieldset>
<label>Upload a profile picture:
<input type="file"
</label>
</fieldset>

VISTA PREVIA

Paso 32
Añade otro label después de la primero, con el texto Input your age
(years):. Luego, anida un input con el type de number.

A continuación, añade un atributo min al input con un valor de 13 porque


los usuarios menores de 13 años no deben registrarse. Además, los
usuarios probablemente no superen la edad de 120; agregue un
atributo max con un valor de 120.

Ahora, si alguien intenta enviar el formulario con valores fuera del rango,
aparecerá una advertencia, y el formulario no enviará. Pruébalo.

<fieldset>
<label>Upload a profile picture: <input type="file" /></
label>
<label>Input your age (years):
<input type="number" min="13" max="120">
</label>
</fieldset>

VISTA PREVIA

Paso 33
Añadir un menú desplegable al formulario es fácil con el elemento select.
El elemento select es un contenedor para un grupo de elementos option,
y el elemento option actúa como una etiqueta para cada opción
desplegable. Ambos elementos requieren etiquetas de cierre.

Comienza, añadiendo un elemento select debajo de los dos


elementos label. Luego, anidar 5 elementos option dentro del
elemento select.

<fieldset>
<label>Upload a profile picture: <input type="file" /></
label>
<label>Input your age (years): <input type="number" min="1
3" max="120" /></label>
<select>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</fieldset>

VISTA PREVIA

Paso 34
Nida el elemento select (con sus elementos option) dentro de label con el
texto How did you hear about us?. El texto debe venir antes del
elemento select.
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="
120" /></label>
<label>
How did you hear about us?
<select>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</select>
</fieldset>
VISTA PREVIA

Paso 35
Las opciones desplegables están actualmente vacías. Para darles
contenido, agregue el siguiente texto a cada elemento subsecuente
de option:

(select one)
freeCodeCamp News
freeCodeCamp YouTube Channel
freeCodeCamp Forum
Other
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="
120" /></label>
<label>How did you hear about us?
<select>
<option>(select one)</option>
<option>freeCodeCamp News</option>
<option>freeCodeCamp YouTube Channel</option>
<option>freeCodeCamp Forum</option>
<option>Other</option>
</select>
</label>
</fieldset>
VISTA PREVIA

Paso 36
Enviar el formulario con una opción seleccionada no enviaría un valor útil
al servidor. Por lo tanto, cada elemento option necesita que se le dé un
atributo value. Sin el cual, el contenido de texto del option será enviado al
servidor.

Dale al primer option un value de "", y a los elementos option subsecuentes


atributos value del 1 al 4.

<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="
120" /></label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
</fieldset>

Paso 37
El elemento textarea actúa como un elemento input de tipo text, pero viene con
la ventaja añadida de poder recibir texto de varias líneas, y un número
inicial de filas y columnas.

Los usuarios podrán registrarse con una biografía. Agregar un label con el
texto Provide a bio: al final del fieldset. Agrega un elemento textarea dentro del
elemento label. Tenga en cuenta que el elemento textarea requiere una
etiqueta de cierre.
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="
120" /></label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea></textarea>
</label>
</fieldset>

VISTA PREVIA

Paso 38
Vincule los elementos de formulario aplicables y con sus elementos label.
Utiliza profile-picture, age, referrer y bio como valores para los respectivos
atributos id.

<fieldset>
<label for="profile-picture">Upload a profile picture: <input typ
e="file" id="profile-picture" /></label>
<label for="age">Input your age (years): <input type="number" min=
"13" max="120" id="age"/></label>
<label for="referrer">How did you hear about us?
<select id="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label for="bio">Provide a bio:
<textarea id="bio"></textarea>
</label>
</fieldset>

Paso 39
El textarea aparece demasiado pequeño. Para darle un tamaño inicial,
puedes agregar los atributos rows y cols.

Agrega un tamaño inicial de 3 filas (rows) y 30 columnas (columns).

<fieldset>
<label for="profile-picture">Upload a profile picture: <input i
d="profile-picture" type="file" /></label>
<label for="age">Input your age (years): <input id="age" type="num
ber" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label for="bio">Provide a bio:
<textarea id="bio" rows="3" cols="30"></textarea>
</label>
</fieldset>
VISTA PREVIA

Paso 40
Para dar a los campistas una idea de lo que deben poner en su biografía,
se utiliza el atributo placeholder. El placeholder acepta un valor de texto, que se
muestra hasta que el usuario empieza a escribir.
Dale al textarea un placeholder de I like coding on the beach....

<fieldset>
<label for="profile-picture">Upload a profile picture: <input i
d="profile-picture" type="file" /></label>
<label for="age">Input your age (years): <input id="age" type="num
ber" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label for="bio">Provide a bio:
<textarea id="bio" rows="3" cols="30" placeholder="I like coding o
n the beach..."></textarea>
</label>
</fieldset>
VISTA PREVIA
Paso 41
Con envíos de formularios, es útil y buena práctica proporcionar a cada
elemento de la tabla de envío un atributo name. Este atributo se utiliza para
identificar el elemento en el envío del formulario.

Dale a cada elemento de la tabla de envío un atributo único name de tu


elección, excepto las dos entradas de radio.

<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-
name" type="text" required name="firstName"/></label>
<label for="last-name">Enter Your Last Name: <input id="last-name"
type="text" required name="lastName"/></label>
<label for="email">Enter Your Email: <input id="email" type="email
" required name="mail"/></label>
<label for="new-password">Create a New Password: <input id="new-
password" type="password" pattern="[a-z0-5]{8,}" required nam
e="pass" /></label>
</fieldset>
<fieldset>
<label for="personal-account"><input id="personal-account" typ
e="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" typ
e="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required nam
e="terms" /> I accept the <a href="https://www.freecodecamp.org/
news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label for="profile-picture">Upload a profile picture: <input i
d="profile-picture" type="file" name="picture"/></label>
<label for="age">Input your age (years): <input id="age" type="num
ber" min="13" max="120" name="ageNumber"/></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="hear">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label for="bio">Provide a bio:
<textarea id ="bio" rows="3" cols="30" placeholder="I like coding
on the beach..." name="area"></textarea>
</label>
</fieldset>

Paso 42
El HTML para el formulario de registro está terminado. Ahora, puedes
mejorar su apariencia.

Empieza cambiando la fuente a Tahoma, y el tamaño de fuente a 16px en


el body.

body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
VISTA PREVIA

Paso 43
Centra los elementos h1 y p dándoles un margin de 1em auto. Luego, alinea su
texto en el center (centro) también.

h1, p {
margin: 1em auto;
text-align: center;
}
VISTA PREVIA
Paso 44
Centra el elemento form, dándole un margin de 0 auto. Luego, fija su tamaño a
un ancho máximo de 500px, y un ancho mínimo de 300px. En medio de ese
rango, permite que tenga un width de 60vw.

form {
margin: 0 auto;
max-width: 500px;
width: 60vw;
min-width: 300px;
}

VISTA PREVIA
Paso 45
Durante el desarrollo, es útil ver los bordes por defecto del fieldset. Sin
embargo, hacen que el contenido aparezca demasiado separado.

Elimina el border, y agrega un relleno de 2rem solo en la parte superior e


inferior de cada fieldset. Asegúrate de eliminar el padding izquierdo y derecho.
fieldset {
border: none;
padding: 2rem 0;
}

VISTA PREVIA
Paso 46
Para dar a los elementos fieldset un poco de separación, selecciónalos y
dales un border-bottom de 3px solid #3b3b4f.
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f
}

VISTA PREVIA
Paso 47
El borde del último elemento fieldset se ve un poco fuera de lugar. Puedes
seleccionar el último elemento de un tipo específico utilizando la pseudo-
clase CSS last-of-type, de esta manera:

p:last-of-type { }
Esto seleccionará el último elemento p. Cree un nuevo selector que apunte
al último elemento fieldset y establezca su border-bottom a none.
fieldset:last-of-type {
border-bottom: none;
}

VISTA PREVIA
Paso 48
Sería más estético que el texto del label apareciera encima de los
elementos del formulario.

Selecciona todos los elementos input, textarea y select, y haz que ocupen todo
el ancho de sus elementos padre.

Además, agrega 10px de margin a la parte superior de los elementos


seleccionados. Establece los otros márgenes a 0.
input, textarea, select {
width: 100%;
margin-top: 10px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}

VISTA PREVIA
Paso 49
Para el segundo fieldset, quieres que el texto del input y el label aparezcan en
la misma línea.

Empieza por dar a los elementos input en el segundo fieldset una clase inline.

<fieldset>
<label for="personal-account"><input id="personal-
account" type="radio" name="account-type" clas
s="inline"/> Personal Account</label>
<label for="business-account"><input id="business-
account" type="radio" name="account-type" clas
s="inline"/> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" requi
red name="terms-and-conditions" class="inline"/> I acc
ept the <a href="https://www.freecodecamp.org/news/
terms-of-service/">terms and conditions</a>
</label>
</fieldset>

Paso 50
Selecciona solos los elementos .inline, y dales un width de unset. Esto eliminará
la regla anterior que establece que todos los input tengan un width: 100%.

.inline {
width: unset;
}

VISTA PREVIA
Paso 51
Agrega un poco de espacio entre los elementos .inline y el texto del label,
dando un margin derecho de 0.5em. Además, establece todos los demás
márgenes a 0.

.inline {
width: unset;
margin-right: 0.5em;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}

VISTA PREVIA

Paso 52
Si te fijas bien, te darás cuenta de que los elementos .inline están
demasiado arriba en la línea.

Para combatir esto, establezca la propiedad vertical-align a middle.


.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
Paso 53
Para hacer que los elementos input y textarea se mezclen con el tema de
fondo, establece su background-color a #0a0a23. Luego, dales un borde de un 1px,
que sea de estilo solid y sea de un color #0a0a23.

input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
}
VISTA PREVIA

Paso 54
Actualmente, si escribes en los elementos input o textarea, no podrás ver el
texto. Además, su altura es demasiado pequeña para ser fácil de usar.

Arregla esto, estableciendo el color a #ffffff, y estableciendo su min-height a 2em.

input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
min-height: 2em;
}
VISTA PREVIA

Paso 55
Quieres que el elemento select siga teniendo un fondo blanco, pero ahora
no tiene el mismo min-height que los elementos input y textarea.

Mueve la propiedad min-height y el valor para que los tres tipos de


elementos tengan el mismo valor min-height, y el select siga teniendo un
fondo blanco.
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}

h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
}

fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
border-bottom: none;
}

label {
display: block;
margin: 0.5rem 0;
}

input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}

input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}

VISTA PREVIA
Paso 56
Para dar estilo al botón de envío, puede utilizar un selector de atributos
(attribute), que selecciona un elemento basado en el valor del atributo
dado. Aquí hay un ejemplo:

input[name="password"]

Lo anterior selecciona los elementos input con un atributo name con el


valor password.

Ahora, utiliza el selector de atributos para dar estilo al botón de envío con
un display de block, y un width de 60%.

input[type="submit"] {
display: block;
width: 60%;
}

VISTA PREVIA
Paso 57
Con un display de block el botón de envío se sitúa al ras del borde izquierdo
de su padre.

Utiliza la misma técnica utilizada para centrar el form para centrar el botón
de envío.

input[type="submit"] {
display: block;
width: 60%;
margin: 0 auto;
}
VISTA PREVIA

Paso 58
Para que el botón de envío se vea más en línea con el resto del
formulario, dale el mimo height que los otros campos (2em). Además,
aumente el font-size a 1.1rem.

input[type="submit"] {
display: block;
width: 60%;
margin: 0 auto;
height: 2em;
font-size: 1.1rem;
}

VISTA PREVIA

Paso 59
Para hacer que el botón de envío aparezca de forma más distintiva, dale
un background-color de #3b3b4f, y un border-color de white.

input[type="submit"] {
display: block;
width: 60%;
margin: 0 auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
}

VISTA PREVIA

Paso 60
Por último, para el botón de envío, quieres separarlo del fieldset anterior, y
ajustar su ancho para que nunca sea inferior a 300px.

Cambia la propiedad margin para incluir 1em en la parte superior e inferior,


dejando los márgenes derecho e izquierdo en auto. A continuación ajuste
la anchura como se ha descrito anteriormente.

input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: 300px;
}

VISTA PREVIA

Paso 61
La mayoría de los navegadores inyectan sus propias propiedades y
valores CSS por defecto para los diferentes elementos. Si te fijas bien,
podrás notar que el input de archivo es más pequeño que los otros
elementos input de texto. Por defecto, se da un padding de 1px 2px a los
elementos input en los que puedes escribir.

Usando otro selector de atributos, estiliza el input con un type de file para
que tenga el mismo relleno que los otros elementos input.

input[type="file"] {
padding: 1px 2px;
}
VISTA PREVIA

Paso 62
Hablando de padding, el botón de envío se encuentra en la parte inferior del
elemento form. Agrega 2em de padding solo a la parte inferior del form.

form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
VISTA PREVIA

Paso 63
Por último, pero no menos importante, cambie el color del texto terms and
conditions a #dfdfe2.

¡Bien hecho! Ha completado la parte final del proyecto de práctica


del Registration Form.

a {
color: #dfdfe2;
}
VISTA PREVIA

También podría gustarte