Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

London 10/mahendra balal/form control #237

Open
mabalal wants to merge 2 commits into
base: main
Choose a base branch
from
Open

London 10/mahendra balal/form control #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
822413f
form-1st-edit
mabalal Feb 15, 2023
7779d7f
2nd-edit
mabalal Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 74 additions & 9 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,83 @@
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
<div class="contact_form">

<div class="formulario">
<h1><b>London T-shirt Shop</b></h1>
<h3>Choose Your Type of T-shirt. Please don't forget to give details on mandetory field.</h3>


<form action="submeter-formulario.php" method="post">


<p>
<label for="nome" class="colocar_nome">Nome
<span class="obrigatorio">*</span>
</label>
<input type="text" name="introduzir_nome" id="nome" required="obrigatorio" placeholder="Yours name">
</p>

<p>
<label for="email" class="colocar_email">Email
<span class="obrigatorio">*</span>
</label>
<input type="email" name="introduzir_email" id="email" required="obrigatorio" placeholder="Yours e-mail">
</p>

<p>
<label for="telefone" class="colocar_telefone">Phone Number:
</label>
<input type="tel" name="introduzir_telefone" id="telefone" placeholder="Yours Phone/mobile No.">
</p>

<p>
<label for="color" class="color_tshirt">Choose your T-shirt:</label>
<select name="color" id="color">
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Green">Green</option>
</select>
</p>

<p>
<label for="size" class="size_tshirt">Choose your T-shirt color:</label>
<select name="color" id="color">
<option value="XS">Extra-Small</option>
<option value="S">Small</Small></option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">E-Large</option>
<option value="XXL">XX-Large</option>
</select>
</p>

<p>
<label for="date" class="date_tshirt">Choose the date to deliver T-shirt:</label>
<select name="date" id="date">
<option value="1stweek">Within 1st Week</option>
<option value="2ndweek">Within 2nd Week</option>
<option value="3rdWeek">Within 3rd Week</option>
<option value="4thweek">Within 4th Week</option>
</select>
</p>
<p>
<label for="mensagem" class="colocar_mensagem">Message/feedback
<span class="obrigatorio">*</span>
</label>
<textarea name="introduzir_mensagem" class="texto_mensagem" id="mensagem" required="obrigatorio" placeholder="Please white here if you have any specific message."></textarea>
</p>

<button type="submit" name="enviar_formulario" id="enviar"><p>Submit</p></button>


</form>
</div>
</div>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>

</footer>
</body>

Expand Down
154 changes: 154 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
/* importação da fonte do google fonts */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);


body{
height: 100%;
font-family: 'Noto Sans', sans-serif;
background-color: lightgray
}


.contact_form{
width: 450px;
height: auto;
margin: 80px auto;
border-radius: 10px;
text-align: left;
padding-top: 30px;
padding-bottom: 20px;
background-color: #fbfbfb;
padding-left: 30px;
}
#color {
background-color: #fbfbfb;
width: 408px;
height: 40px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #050505;
margin-top: 10px;
padding-left: 10px;
margin-bottom: 20px;
}
#date {
background-color: #fbfbfb;
width: 408px;
height: 40px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #050505;
margin-top: 10px;
padding-left: 10px;
margin-bottom: 20px;
}
input{
background-color: #fbfbfb;
width: 408px;
height: 40px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #050505;
margin-top: 10px;
padding-left: 10px;
margin-bottom: 20px;
}


textarea{
background-color: #fbfbfb;
width: 405px;
height: 150px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #060505;
margin-top: 10px;
padding-left: 10px;
margin-bottom: 20px;
padding-top: 15px;
}


label{
display: block;
float: center;
}


button{
height: 45px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 20px;
margin-top: 10px;
text-transform: uppercase;
background-color: #0f0d0d;
border-color: #131212;
border-style: solid;
border-radius: 10px;
width: 420px;
cursor: pointer;
}


button p{
color: #fff;
}


span{
color: #1a1818;
}


.aviso{
font-size: 13px;
color: #0e0e0e;
}


h1{
font-size: 35px;
text-align: center;
padding-bottom: 20px;
color: black;
}


h3{
font-size: 14px;
padding-bottom: 30px;
color: #0e0e0e;
}


p{
font-size: 14px;
color: #0e0e0e;
}


::-webkit-input-placeholder {
color: #a8a8a8;
}


::-webkit-textarea-placeholder {
color: #a8a8a8;
}


.formulario input:focus{
outline:0;
border: 1px solid #97d848;
}


.formulario textarea:focus{
outline:0;
border: 1px solid #97d848;
}