Creando el maquetado

Clase 20 de 24 • Curso de PHP: Integración con HTML

Clase anteriorSiguiente clase

José Mota

student•

Este es mi maquetado hecho con HTML y CSS.

Kenneth Angulo L

student•

Esta muy chevere !

José Samuel Mena Reyes

student•

Yo utilice TailwindCSS y para los iconos, yo puedo recomendar esta librería, la cuál es muy buena y los iconos son bastantes limpios: Line Awesome, está libreria pertenece a ICONS8, otra plataforma de iconos con una gran diversidad de ellos.

Maquetado

Uriel Zoe Sanjuán Morales

student•

Este curso me ha encantado igual que los de este profe, definitivamente tiene una forma muy dinámica de enseñar y dejar claro los conceptos, les dejo mi formulario . .

Josué Eduardo Apén Bal

student•

¿Podrías compartir el código? Te quedó increíble. :0

Maria Camila Amaya Rubio

student•

Este fue mi pequeño formulario

Cristian Pisco Intriago

student•

Este es el maquetado que hice usando tailwind.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Formulario de contacto</title>
	<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
	<div class="grid place-content-center min-h-screen bg-slate-900">
		<div class="max-w-md mx-auto px-4 py-4">
			<form action="#">
				<h1 class="text-xl text-center text-white">Contactanos</h2>
				<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-500 outline-none focus:border-gray-400"
					placeholder="Nombre" type="text" name="name" id="name">

				<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-400 outline-none focus:border-gray-400"
					placeholder="Correo" type="email" name="email" id="email">

				<input class="w-full px-4 py-2 my-3 border-b-2 border-gray-400 outline-none focus:border-gray-400"
					placeholder="Asunto" type="text" name="subject" id="subject">

				<textarea class="w-full h-32 px-4 py-3 my-3 border-b-2 border-gray-400 rounded-sm outline-none focus:border-gray-400" name="message" 	placeholder="Mensaje"></textarea>

				<div class="w-full flex justify-center">
					<button class="rounded bg-cyan-500 px-4 py-2 font-semibold w-40" type="submit">Enviar</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

Eduer Pallares Jiménez

student•

¡Felicitaciones! recomiendan Tailwind?

Gonzalo Giampaolo

student•

Durante el curso de Tailwind me dí cuenta de que no me gustó para nada. Me parece muy desprolijo el tema de todas las etiquetas en el html.

Ruben Guerrero

student•

Así quedó mi formulario

Michael Cardenas

student•

Este es mi aporte en HTML y CSS.

HTML

<!-- //index -->

<!DOCTYPE html>
<html lang="en">
<head>
    <?php
    header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
    ?>
    <meta http-equiv="Expires" content="0"> 
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Styles -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="style.css">

    <title>Php con HTML</title>
</head>
<body>
<div class="container">
    <div class="tittle"> <strong> Registro de cliente </strong></div>
    <form action="#">
        <div class="user-details">
            <div class="input-box">
                <span class="details"> Nombre</span>
                <input type="text" placeholder="Ingresa tu nombre" required>
            </div>
            <div class="input-box">
                <span class="details"> Telefono</span>
                <input type="number" placeholder="Ingresa tu Telefono" required>
            </div>
            <div class="input-box">
                <span class="details"> Correo electronico</span>
                <input type="text" placeholder="Ingresa tu telefono" required>
            </div>
          
        <div class="gender-details">
            <input type="radio" name="gender" id="dot-1">
            <input type="radio" name="gender" id="dot-2">
            <input type="radio" name="gender" id="dot-3">
           
            <span class="gender-title">Arreglo</span>
            <div class="category">
                <label for="dot-1">
                    <span class="dot one"></span>
                    <span class="gender">Pantalon</span>
                </label>
                <label for="dot-2">
                    <span class="dot two"></span>
                    <span class="gender">Chaqueta</span>
                </label>
                <label for="dot-3">
                    <span class="dot three"></span>
                    <span class="gender">Otro</span>
                </label>
            </div>
        </div>
        <div class="input-box">
                <span class="details"> Arreglo</span>
                <input class="arreglo" type="text" placeholder="Descripcion de la modificacion de la prenda" required>
            </div>
            <div class="input-box">
                <span class="details">Fecha</span>
                <input type="date" placeholder="Ingresa tu nombre" required>
            </div>
        </div>
        <div class="button">
            <input type="submit" value="Register">
        </div>
    </form>
</div>

</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing:boder-box;
    font-family: 'Popins',sans-serif;
    }
    body{
        display: flex;
        height: 100vh;
    justify-content: center;
    align-items: center;
    background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);







    }
    .container{
        max-width: 700px;
        width: 100%;
        background: #ffff;
        padding: 25px 30px;
        border-radius: 5px;

    }
    .container .title {
        font-size: 25px;
        font-weight: 500;
        position: relative;

    }
    .container .title::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height:  3px;
        width: 30px;
        background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);



    }
    .container form .user-details{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0 12px 0;

    }

    form .user-details .input-box{
        margin-bottom: 15px;
        width:calc(100% / 2 - 20px);
    }
    .user-details .input-box .details{
        display: block;
        font-weight: 500;
        margin-bottom: 5px;
    }
    .user-details .input-box input{
        height: 45px;
        width: 100%;
        outline: none;
        border-radius: 5px;
        border: 1px solid #ccc;
        padding-left: 15px;
        font-size: 16px;
        border-bottom-width: 2px;
        transition: all 0.3s ease;

    }
    .user-details .input-box input:focus,
    .user-details .input-box input:focus{
        border-color: black;
    }
   

    form .gender-details .gender-title{
        font-size: 15px;
        font-weight: 500;
    }
    form .gender-details .category{
        display: flex;
        width: 80%;
        margin: 14px 0;
        justify-content: space-between;
    }
    .gender-details .category label{
        display: flex;
        align-items: center;

    }
    
    .gender-details .category .dot{
        height: 18px;
        width: 18px;
        background: #d9d9d9;
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
        border:5px solid transparent ;
        transition: all 0.3s ease;

    }
    #dot-1:checked ~ .category label .one,
    #dot-2:checked ~ .category label .two,
    #dot-3:checked ~ .category label .three{
        border-color: #37f278;
        background: #68ef65;

    }
    form input [type="radio"]{
        display: none;
    }
    
    form .button{
        height: 45px;
        margin: 45px 0;

    }
    form .button input{
        height: 100%;
        width: 100%;
        outline: none;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        border-radius: 5px;
        letter-spacing: 1px;
        background: linear-gradient(355deg, #ff89a4 0, #ff8f90 5.56%, #ff967c 11.11%, #ff9e6a 16.67%, #ffa758 22.22%, #ffb047 27.78%, #ffb937 33.33%, #ffc228 38.89%, #ffca1a 44.44%, #f8d110 50%, #e5d812 55.56%, #d0de1f 61.11%, #bae32e 66.67%, #a2e840 72.22%, #88ec52 77.78%, #68ef65 83.33%, #37f278 88.89%, #00f48d 94.44%, #00f6a2 100%);

    }

    form .button input:hover{
        background: #F24C4C;
    } 
    @media (max-width: 584px){
        .container{
            max-width: 100%;
        }
        form .user-details .input-box{
            margin-bottom: 15px;
            width:100%;
        }
        form .gender-details .category{
           
            width: 100%;}
        .container form .user-details{
            max-height: 300px;
            overflow-y: scroll;
        }
        .user-details::-webkit-scrollbar{
            width: 0;
        }
    }

Joel Dominguez Merino

student•

Ya quedo mi formulario 😍 Se los comparto por si a alguno le sirve como guía . Resultado

. HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/img/contacto.png" type="image/x-icon">
  <link rel="stylesheet" href="./css/styles.css">
  <title>iJCode - Formulario de Contacto</title>
</head>
<body>
  <!-- Creación de la estructura del Formulario -->
  <div class="form-container">
    <div class="container">
      <form action="#" class="form">
        <div class="form-header">
          <h2 class="form-title">¡Contactanos ✨!</h3>
        </div>
        <div class="form-body">
          <label class="form-label" for="name">Nombre: </label>
          <input class="form-input" type="text" required name="name" id="name" placeholder="Julieta Ortiz Sanchez">

          <label class="form-label" for="email">Correo: </label>
          <input class="form-input" type="text" required name="email" id="email" placeholder="julieta.den@dev.mx">

          <label class="form-label" for="subject">Asunto: </label>
          <input class="form-input" type="text" required name="subject" id="subject" placeholder="Solicitud de documentación final">

          <label class="form-label" for="message">Mensaje: </label>
          <textarea class="form-area" name="message" id="message" placeholder="Me urge obtener la documentación del proyecto de la papelería debido a que ya estoy en fecha límite para entregarlos al área correspondiente"></textarea>

          <button class="form-cta">Enviar</button>
        </div>
      </form>
      <div class="form-footer">
        <p class="form-paragraph"><i class="fa-solid fa-location-dot"></i> 13 Saw Mill Circle, North Olmested.</p>
        <p class="form-paragraph"><i class="fa-solid fa-phone"></i> +1 123 456 7890</p>
      </div>
    </div>
  </div>

  <!-- Mensaje de error -->
  <div class="message">
    <div class="container">
      <div class="message-error">
        <p class="message-paragraph">Surgió un problema</p>
      </div>
    </div>
  </div>

  <!-- Mensaje de éxito -->
  <div class="message">
    <div class="container">
      <div class="message-success">
        <p class="message-paragraph">¡Mensaje enviado con éxito!</p>
      </div>
    </div>
  </div>

  <script src="https://kit.fontawesome.com/36b3528883.js" crossorigin="anonymous"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
:root{
  --mainColor: #1B2430;
  --white: #F9F2ED;
  --mainFont: 'Lato', sans-serif;
  --cardBackground: #816797;
  --cta: #371B58;
  --red: #F87474;
  --green: #9EB23B;
}

body{
  margin: 0;
  block-size: 100%;
  min-block-size: 100vh;
  font-family: var(--mainFont);
  background-color: var(--mainColor);
  padding: 2rem 0;
}

.form-container{
  color: #F9F2ED;
  border-block-start: .1px solid transparent;
}

.form{
  box-shadow: rgba(255, 255, 255, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.container{
  inline-size: 90%;
  max-inline-size: 43.75rem;
  margin: 0 auto;
  border-radius: .5rem;
  box-sizing: border-box;
  overflow: hidden;
}

.form{
  background-color: var(--cardBackground);
  padding: 2rem 1.5rem;
  position: relative;
}

.form::before{
  content: '';
  position: absolute;
  background-color: var(--white);
  block-size: 1rem;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
}

.form-header{
  margin-block-end: 2rem;
}

.form-title{
  margin: 0;
  text-align: center;
  font-size: 2.2rem;
}

.form-body{
  display: flex;
  flex-direction: column;
}

.form-label{
  font-weight: 700;
  margin-block-end: .25rem;
}

.form-input,
.form-area{
  font-family: var(--mainFont);
  margin-block-end: 2rem;
  padding: .625rem;
  border-radius: .25rem;
  border: none;
  outline: none;
  font-size: 1rem;
}

.form-area{
  inline-size: auto;
  block-size: 6rem;
  resize: none;
}

.form-cta{
  background-color: var(--cta);
  border: none;
  color: var(--white);
  padding: 1rem 0;
  border-radius: .25rem;
  font-weight: 700;
  transition: transform .2s;
  border: none;
  text-transform: uppercase;
}

.form-cta:active{
  transform: scale(.9);
}

.form-cta:hover{
  --cta: #371b58a3;
}

.form-footer{
  border-block-start: 0.1px solid transparent;
  background-color: var(--white);
  color: var(--mainColor);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.form-paragraph{
  margin: 0;
  font-weight: 700;
}

.fa-solid{
  color: var(--cardBackground);
}

.message-error,
.message-success{
  padding: 2rem;
  color: var(--white);
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem 0; 
  border-radius: .25rem;
}

.message-error{
  background-color: var(--red);
}

.message-success{
  background-color: var(--green);
}

.message-paragraph{
  margin: 0;
}

@media screen and (min-width: 768px){
  .form-title{
    font-size: 3rem;
  }

  .form-cta{
    font-size: 1rem;
  }

  .form-footer{
    flex-direction: row;
    justify-content: space-between;
  }

  .form-paragraph{
    font-size: 1.2rem;
  }
}

Henry

student•

Si son de los que no le saben mucho al frontend (como yo), pueden apoyarse en herramientas como bootstarp para crear pequeños formularios y realizar estos proyectos. Aunque nunca esta de mas tomar el curso definitivo de html y css de platzi.

Eduer Pallares Jiménez

student•

Esos cursos también están muy buenos eh!

JOHAN OROZCO

student•

Gabriela de los Angeles Aguilar Moreno

student•

Así quedo mi formulario con mis colores favoritos, obviamente con un texto lorem porque no tenia muchas ganas de escribir jajaja ![](

Raymundo Cristian Wong

student•

Israel Josue Feric Godoy

student•

Me gusta un estilo simple, siento que destaca mas saludos.

Israel Josue Feric Godoy

student•

Codigo css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Roboto", sans-serif;
}

span {
  position: absolute;
  right: 456px;
  top: 72px;
  font-size: 3rem;
  font-weight: 700;
  background-color: red;
  padding: 0.1rem 1rem;
  border-radius: 5px;
  transition: 0.3s;
}
span:hover {
  background-color: black;
  color: white;
}

h2 {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 2rem;
}

.container-form {
  display: flex;

  flex-direction: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  align-content: center;
  background-color: papayawhip;
}

.order-form {
  display: flex;
  flex-direction: column;
  align-self: center;
  border: 0.3rem solid black;
  border-radius: 10px;
  padding: 3rem 4rem 3rem 4rem;
  width: 35%;
  height: 80%;
  background-color: white;
  box-shadow: 5px 8px 0px black;
}

label {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

input {
  border-style: none;
  border-radius: 5px;
  margin-bottom: 1rem;
  background-color: rgb(194, 193, 193);
  padding: 1rem;
}
textarea {
  background-color: rgb(194, 193, 193);
  height: 100px;
  border-style: none;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 5px;
}

button {
  background-color: black;
  color: white;

  border-radius: 5px;
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1.6rem;
  width: 100px;
  align-self: self-end;
  transition: 0.3s;
}
button:hover {
  background-color: papayawhip;
  color: black;
}

Jesús Alexis Tenorio Hernández

student•

El mio quedo asi. Utilizando TailwindCSS

Cristobal Nyram

student•

Les dejo mi aporte

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario con PHPmailer</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>

    <center>
    <h2>
        Envia un correo electronico aquí
    </h2>
    </center>
    <form class="form-style-4" action="" method="post">

                <label for="field1">
                <span>Tu nombre</span><input type="text" name="field1" required="true" />
                </label>

                <label for="field2">
                <span>Correo electronico</span><input type="email" name="field2" required="true" />
                </label>

                <label for="field3">
                <span>Tema de platica</span><input type="text" name="field3" required="true" />
                </label>

                <label for="field4">
                <span>Contenido del mensaje</span><textarea name="field4" onkeyup="adjust_textarea(this)" required="true"></textarea>
                </label>

                <label>
                <span> </span><input type="submit" value="Enviar el correo" />
                </label>
    </form>
</body>
</html>

CSS


@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

h1
{
    font-family: 'Lato', sans-serif;
   padding-top: 5rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #1C819E;
}
body
{
    background-color: #FFD6FF;
}
form
{
    margin: 2rem auto;
    border-radius: 5%;
}

.form-style-4{
	width: 450px;
	font-size: 16px;
	background: #845EC2;
	padding: 30px 30px 15px 30px;
	border: 5px solid #B39CD0;
}
.form-style-4 input[type=submit],
.form-style-4 input[type=button],
.form-style-4 input[type=text],
.form-style-4 input[type=email],
.form-style-4 textarea,
.form-style-4 label
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #fff;

}
.form-style-4 label {
	display:block;
	margin-bottom: 10px;
}
.form-style-4 label > span{
	display: inline-block;
	float: left;
	width: 150px;
}
.form-style-4 input[type=text],
.form-style-4 input[type=email] 
{
	background: transparent;
	border: none;
	border-bottom: 1px dashed #83A4C5;
	width: 275px;
	outline: none;
	padding: 0px 0px 0px 0px;
	font-style: italic;
}
.form-style-4 textarea{
	font-style: italic;
	padding: 0px 0px 0px 0px;
	background: transparent;
	outline: none;
	border: none;
	border-bottom: 1px dashed #83A4C5;
	width: 275px;
	overflow: hidden;
	resize:none;
	height:20px;
}

.form-style-4 textarea:focus, 
.form-style-4 input[type=text]:focus,
.form-style-4 input[type=email]:focus,
.form-style-4 input[type=email] :focus
{
	border-bottom: 1px dashed #D9FFA9;
}

.form-style-4 input[type=submit],
.form-style-4 input[type=button]{
	background: #FBEAFF;
	border: none;
	padding: 8px 10px 8px 10px;
	border-radius: 5px;
	color: #845EC2;
}
.form-style-4 input[type=submit]:hover,
.form-style-4 input[type=button]:hover{
background: #394D61;
}