600 829 454
info@quatresoft.com
Facebook
Twitter
LinkedIn
YouTube
RSS
QuatreSoft, servicios de Internet
  • Sobre nosotros
  • Servicios
  • Nuestros trabajos
  • Blog
  • Contacto
Formulario sencillo con HTML5 y CSS3: Dándole diseño

Formulario sencillo con HTML5 y CSS3: Dándole diseño

17 diciembre, 2015QuatreSoftDesarrollo web, Páginas WebNo hay comentarios

Hace unas semanas os contamos como se podía hacer un formulario con HTML5 y hoy le daremos un formato más atractivo gracias al CSS3, ese lenguaje ideal para conseguir un buen diseño con un código hecho en HTML5. Así que vamos a contaros como Darle diseño a un Formulario sencillo con HTML5 y CSS3.

Evidentemente no vamos a hacer una virguería de diseño, ni nada complejo, solo unas nociones básicas para que no sea HTML5, puro y duro. Para ello, y aunque se puede hacer insertando el código CSS directamente en el archivo html, nosotros preferimos crear un archivo a parte al que tradicionalmente se llama style.css y hay que indicarle al html donde encontrar este archivo. Para ello eh <head> le indicamos la ruta hasta el css, en nuestro caso css/style.css porque hemos colocado el archivo dentro de una carpeta llamada css y quedarí así:

<link rel="stylesheet" href="css/style.css">

Además de esta linea nosotros hemos visto conveniente añadir enun div que engloba todo el formulario, que utilizaremos para darle diseño:

<div id=”contact-form”>
           (…formulario…)
</div>

Si pasamos al archivo style.css es donde empezamos a darle diseño al Formulario sencillo con HTML5 y CSS3. Lo primero de todo es resetear todos los elementos estándar como html, body, form, h1, etc. Solo los que aparezcan en nuestro formulario. En nuestro casi será h2, h4 y body:

body, h2, h4{
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline;
}

Y elegimos la fuente de la letra que usaremos:

body{ 
    font:13px/1.231 sans-serif; 
    *font-size:small; 
}
select, input, button{ 
    font:99% sans-serif; 
}

A continuación configuramos los títulos que usaremos y el tamaño de letra:

h2{
    margin-bottom:15px; 
    font-style:italic; 
    font-weight:normal; 
    font-size:32px;
}
h4{
    font-weight: bold;
}
#contact-form input,#contact-form select,#contact-form label{
    font-size:15px; 
    margin-bottom:2px;
} 

Le daremos un estilo al fondo del formulario con:

#contact-form {
    background-color:#e6eded;
    width:460px;
    padding:20px;
    margin: 50px auto;	
    border: 6px solid #00B97F;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    position:relative;
}

Destacar que hemos utilizado algunas nuevas funcionalidades de esta versión de CSS como las esquinas redondeadas con border-radius. También personalizaremos los bordes de cada caja, primero la normal y a continuacion con focus para la que esté seleccionada en ese momento

#contact-form input, #contact-form select{
    width:450px;
    border: 1px solid #00B97F; 
    margin-bottom:20px; 
    padding:4px;
}
#contact-form input:focus, #contact-form select:focus{
    border: 1px solid #2DAFC5;
    background-color: #CCE8DF;
}

Para la estrella que indica que un campo obligatorio también tenemos que darle un color determinado:

#contact-form .required{
    font-weight:bold; 
    color:#F00;
}

Y el botón de enviar lo personalizamos diferente para sus tres posiciones: Normal, poner el ratón encima y presionar con el botón:

#contact-form #submit-button{
    width: 100px;
    padding: 10px;
    background-color:#333;
    color:#FFF;
    border:none;
    display:block;
    float:right;
    margin-bottom:0px;
    margin-right:6px;
    background-color:#00B97F;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
}
#contact-form #submit-button:hover{
    background-color: #2DAFC5;
}
#contact-form #submit-button:active{
    position:relative;
    top:1px;
}

Y por perfilar terminaremos poniendo en cursiva la frase “rellenar obligatoriamente” con:

#req-field-desc{
    font-style:italic;
}

Con esto tenemos nuestro Formulario sencillo con HTML5 y CSS3 al que le hemos dado un diseño personalizado y más atractivo para los visitantes de nuestra página web. Aunque no hemos entrado en detalle a analizar cada atributo, podemos resolver las dudas que tengáis.

Ahora que le hemos dado un diseño al formulario, sería el momento de darle seguridad y reglas de uso con JavaScript.

Pero de momento hasta aquí: Cómo darle diseño a un formulario sencillo con HTML5 y CSS3. Podéis verlo en funcionamiento en la siguiente demo.
DEMO

 

Imagen encontrada en www.clevertech.biz

Facebook
Twitter
LinkedIn
Pinterest
Etiquetas: CSS3, Formularios, Tutoriales

Entradas relacionadas

Formulario sencillo con HTML5 ¿Cómo crearlo?

22 octubre, 2015QuatreSoft

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  He leído y acepto la política de privacidad de QuatreSoft CB

Información sobre protección de datos

  • Responsable: QuatreSoft CB
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, eliminación y olvido.
  • Contacto: info@quatresoft.com.
  • Información adicional en: nuestra política de privacidad.

Nuestro Facebook

QuatreSoft

Entradas recientes

  • ¿Los algoritmos controlan todo lo que vemos en Internet?
  • Cuida tu canal de YouTube
  • Email marketing sigue siendo muy útil en cualquier estrategia
  • Formas de hacer un logotipo
  • Qué color elegir para representar a una marca o empresa

Nuestro Twitter

Tweets por el @QuatreSoft.

Categorías

  • Audiovisual (22)
  • Comunicados (4)
  • Desarrollo Móvil (14)
  • Desarrollo web (40)
    • Páginas Web (18)
    • Tiendas Online (15)
  • Diseño gráfico (21)
  • Emprendedores (4)
  • Marketing Online (64)
    • eMail marketing (13)
    • Redes sociales (19)
    • SEO/SEM (17)
  • Nuevas tecnologías (27)

Etiquetas

Android Anuncios Aplicaciones Apps Blog Colores Community Manager Consejos Correo electrónico Diseñadores Diseño web Dominio eCommerce Emprendedurismo Eventos Facebook Google Herramientas Herramientas CM Herramientas SEO Hosting Instagram Inventos Logotipos Mailing Marcas Marketing de contenidos Newsletter Posicionamiento Publicidad digital Seguridad Smartphone Sobre QuatreSoft Social Media Streaming Tablets Twitter Usabilidad Velocidad de carga Ventas Vídeo corporativo Vídeo marketing Vídeo online Wordpress YouTube

Contacto

+34 600 829 454
info@quatresoft.com
Facebook
Twitter
LinkedIn
YouTube
RSS

Páginas de interés

  • Ir a la página de inicio
  • Aviso legal
  • Política de privacidad
  • Política de Cookies
  • ¿Quieres trabajar con nosotros?
  • Noticias y artículos del mundo informático
  • Todos los servicios que ofrecemos
QuatreSoft es una empresa joven, dinámica y creada por emprendedores, donde nos centramos en el desarrollo web, la realización audiovisual y el marketing online. Algunos de nuestros servicios son: Desarrollo de páginas web y tiendas online, gestión de redes sociales, posicionamiento SEO/SEM, vídeos corporativos, etc
InicioSobre nosotrosServiciosNuestros trabajosContacto
QuatreSoft 2016. Todos los derechos reservados
Aviso sobre el uso de Cookies en esta página web
Usamos cookies propias y de terceros en nuestro sitio web para brindarle la experiencia más relevante recordando sus preferencias y visitas realizadas. Al hacer clic en "Aceptar", estará aceptando el uso de TODAS las cookies. Puedes informarte de todo aquí: Leer más sobre nuestra Política de Cookies
ACEPTARCONFIGURACIÓNRECHAZAR
Privacy & Cookies Policy

Resumen de privacidad sobre las cookies

Este sitio web utiliza cookies propias y de terceros para mejorar su experiencia mientras navega por el sitio web. De estas, las cookies que se clasifican como necesarias se almacenan en su navegador, ya que son esenciales para el funcionamiento de las funcionalidades básicas del sitio web. También utilizamos cookies de terceros que nos ayudan a analizar y comprender cómo utiliza este sitio web. Estas cookies se almacenarán en su navegador solo con su consentimiento. También tiene la opción de optar por no recibir estas cookies. Pero la exclusión voluntaria de algunas de estas cookies puede afectar su experiencia de navegación y a nosotros nos viene muy bien para recopilar estadísticas del uso de la web con el fin de mejorar la experiencia del usuario.
Necesarias
Siempre activado
Las cookies necesarias son absolutamente esenciales para que el sitio web funcione correctamente. Esta categoría solo incluye cookies que garantizan funcionalidades básicas y características de seguridad del sitio web. Estas cookies no almacenan ninguna información personal.
No necesarias
Las cookies que pueden no ser particularmente necesarias para que el sitio web funcione y se utilizan específicamente para recopilar datos personales del usuario a través de análisis y otros contenidos integrados se denominan cookies no necesarias. Antes de ejecutar estas cookies tendrá que aceptarlas. Aunque no son necesarias, a nosotros nos viene genial que las aceptes para tener un control estadístico de las visitas que recibidomos.
GUARDAR Y ACEPTAR