Un formulario HTML es una herramienta esencial para recopilar información de los usuarios en un sitio web. Permite crear interacciones dinámicas y recabar datos valiosos. En su estructura, encontramos varias etiquetas clave.
La etiqueta “<fieldset>” se utiliza para agrupar elementos de formulario juntos. Proporciona un contenedor lógico para todos los elementos relacionados dentro del formulario.
La etiqueta “<legend>” se utiliza para agregar una descripción o título al grupo de elementos de formulario contenido en “<formfield>“. Sirve para proporcionar una breve explicación o instrucción relacionada con el conjunto de elementos.
La etiqueta “<label>” se utiliza para asociar una etiqueta descriptiva con un elemento de formulario específico. Proporciona un texto legible que describe el propósito o la función del campo de entrada. La etiqueta “<label>” se utiliza en combinación con el atributo “for” para establecer la asociación con el elemento de formulario.
El atributo “for” se utiliza en la etiqueta “<label>” para indicar a qué elemento de formulario se refiere. El valor del atributo “for” debe coincidir con el valor del atributo “id” del elemento de formulario al que se desea asociar.
La etiqueta “<input>” es una de las más utilizadas en formularios HTML. Define un campo de entrada donde los usuarios pueden ingresar datos. Puede tener diferentes tipos, como texto, contraseña, número, fecha, entre otros. Además, el atributo “id” se utiliza para identificar de manera única un elemento de formulario dentro del documento HTML.
En resumen, un formulario HTML se compone de etiquetas como “<fieldset>”, “<legend>”, “<label>”, “<input>”, y se utilizan atributos como “for” e “id” para asociar y distinguir los diferentes elementos de formulario. Estas etiquetas y atributos son fundamentales para crear formularios interactivos y funcionales en un sitio web.
Ejemplo:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>friendsbook</h1>
<h3>Update Profile Information</h3>
<form>
<fieldset>
<legend>Personal Info</legend>
<label for="name">Name:</label>
<input id="name" type="text"><br>
<label for="email">Email:</label>
<input id="email" type="email"><br>
<label for="dob">Birthday:</label>
<input id="dob" type="date"><br>
<button>Update</button>
</fieldset>
<fieldset>
<legend>Update Password</legend>
<label for="oldpassword">Old password:</label>
<input id="oldpassword" type="password"><br>
<label for="newpassword">New password:</label>
<input id="newpassword" type="password"><br>
<button>Update</button>
</fieldset>
<fieldset>
<legend>More about you</legend>
<label for="pronouns">Pronouns:</label>
<input id="pronouns" type="text"><br>
<label for="country">Country:</label>
<input id="country" type="text"><br>
<label for="bio">Bio:</label>
<textarea id="bio"></textarea><br>
<button>Update</button>
</fieldset>
</form>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lato:wght@300&display=swap');
h1 {
font-family: 'Fredoka One', cursive;
}
body {
text-align: center;
font-family: Lato;
display: grid;
background: seashell;
}
form {
width: 80%;
margin: auto;
}
label {
float: left;
width: 50%;
}
input,
textarea {
float: left;
width: 50%;
margin: 10px;
padding: 10px;
background: lemonchiffon;
font-family: Lato;
border: none;
}
fieldset {
margin: 10px;
font-weight: bold;
background: #FEFEFE;
}
button {
background: plum;
font-size: 15px;
padding: 10px;
border: none;
float: right;
color: white;
}
legend {
background: #F76C6C;
padding: 5px;
color: white;
}
Ejemplo 2:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add Shipping Address</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Amazonia</h1>
<h3>Add a new shipping address</h3>
<!-- add your code here -->
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Full name (First and Last name)</label><br>
<input id="name" type="text"><br>
<label for="phone">Phone number</label><br>
<input id="phone" type="number"><br>
</fieldset>
<fieldset>
<legend>Address Information</legend>
<label for="country">Country</label><br>
<input id="country" type="text"><br>
<label for="address">Address</label><br>
<input id="address" type="text"
placeholder="Street address or P.O. Box"><br>
<input type="text" placeholder="Apt, suite, unit, building, floor"><br>
<label for="city">City</label><br>
<input id="city" type="text"><br>
<label for="state">State</label><br>
<input id="state" type="text"><br>
<label for="zip">ZIP Code</label><br>
<input id="zip" type="text">
<input type="checkbox"> My address does not have ZIP Code.<BR>
<p><input type="checkbox"> Use as my default address.</p>
</fieldset>
<button>Add</button>
</form>
</body>
</html>
html,
body {
height: 100%;
width: 500px;
margin: 0 auto;
}
body h1 {
text-align: center;
color: orange;
}
