Claro, aquí tienes un formulario HTML que incluye una amplia variedad de elementos de formulario comunes. Formulario Completo

Formulario HTML Completo

Información Personal

Nombre:

Apellido:

Contraseña:

Correo Electrónico:

Teléfono:

Sitio Web:

Información Adicional

Fecha de Nacimiento:

Hora de la Cita:

Fecha y Hora del Evento:

Mes de Vacaciones:

Semana del Reporte:

Cantidad (entre 1 y 10):

Nivel de Satisfacción (0-100): 50

Color Favorito:

Buscar:

Preferencias

País:

Navegador Preferido:

Intereses:

Tecnología Deportes Música Viajes

Género:

Masculino Femenino Otro Prefiero no especificar

Comentarios y Archivos

Comentarios:

Adjuntar CV (PDF):

Adjuntar Foto (JPG, PNG):

body { font-family: sans-serif; line-height: 1.6; margin: 20px; background-color: #f4f4f4; } h1 { color: #333; text-align: center; margin-bottom: 30px; } form { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 700px; margin: 0 auto; } fieldset { border: 1px solid #ccc; border-radius: 5px; margin-bottom: 20px; padding: 15px; } legend { font-weight: bold; color: #555; padding: 0 10px; } label { display: block; margin-bottom: 5px; color: #333; font-weight: 500; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="number"], input[type="search"], input[type="color"], select, textarea, input[list] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Include padding and border in the element's total width and height */ font-size: 1rem; } input[type="range"] { width: calc(100% - 40px); /* Adjust width to make space for output */ vertical-align: middle; } output { display: inline-block; vertical-align: middle; margin-left: 10px; font-weight: bold; min-width: 25px; /* Ensure space for value */ text-align: right; } input[type="checkbox"], input[type="radio"] { margin-right: 8px; vertical-align: middle; /* Align checkboxes/radios with their labels */ } /* Style labels associated with checkboxes and radios for better spacing */ input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; /* Keep label on the same line */ margin-right: 15px; /* Add space between options */ margin-bottom: 10px; /* Add space below options */ font-weight: normal; /* Normal weight for options */ } /* Ensure block-level labels for inputs don't get overridden */ label:not([for^="archivo"]):not([for^="intereses"]):not([for^="genero"]) { display: block; font-weight: 500; } /* Group checkboxes and radios visually */ div > p { /* Target the

tags used as headings for checkbox/radio groups */ margin-bottom: 8px; font-weight: bold; color: #333; } input[type="file"] { border: none; padding: 10px 0; } button, input[type="submit"], input[type="reset"], input[type="button"] { background-color: #007bff; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-right: 10px; margin-top: 10px; transition: background-color 0.2s ease; } button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color: #0056b3; } button[type="reset"], input[type="reset"] { background-color: #6c757d; } button[type="reset"]:hover, input[type="reset"]:hover { background-color: #5a6268; } button[type="button"], input[type="button"] { background-color: #ffc107; color: #333; } button[type="button"]:hover, input[type="button"]:hover { background-color: #e0a800; } .buttons { text-align: center; margin-top: 20px; } /* Basic responsiveness */ @media (max-width: 600px) { form { padding: 15px; } button, input[type="submit"], input[type="reset"], input[type="button"] { width: 100%; margin-right: 0; margin-bottom: 10px; } .buttons { text-align: left; /* Stack buttons vertically */ } } // Script simple para actualizar el output del range const rangeInput = document.getElementById('rango_satisfaccion'); const rangeOutput = document.querySelector('output[for="rango_satisfaccion"]'); if (rangeInput && rangeOutput) { rangeInput.addEventListener('input', () => { rangeOutput.textContent = rangeInput.value; }); // Set initial value on load rangeOutput.textContent = rangeInput.value; } // Puedes añadir más JavaScript aquí para validaciones u otras interacciones console.log("Formulario cargado."); Este formulario incluye campos de texto, contraseña, correo electrónico, número, fecha, hora, selecciones, casillas de verificación, botones de radio, área de texto, carga de archivos, campos ocultos, y botones de envío, reinicio y genéricos. También utiliza `fieldset` y `legend` para agrupar campos relacionados y `label` para la accesibilidad. He añadido CSS básico para mejorar la presentación.