HTML
16
1
<div class="container">2
<form action="#">3
<label><input type="name" required> Name *</label>4
<label><input type="email" required> Email *</label>5
<label><input type="phone"> Phone (optional)</label>6
<label><input type="url"> Website (optional)</label>7
<select name="#" id="##">8
<option value="1">Subject (optional)</option>9
<option value="2">Option</option>10
<option value="3">Option</option>11
<option value="4">Option</option>12
</select>13
<textarea name="#" id="#" cols="30" rows="10" required>Message (required)</textarea>14
<button>Submit Form</button>15
</form>16
</div>CSS
83
1
body {2
color: #555;3
font-size: 1.1em;4
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;5
}6
7
hr {8
margin: 50px 0;9
}10
11
.container {12
margin: 40px auto;13
max-width: 400px;14
}15
16
label,17
button {18
display: block;19
width: 100%;20
margin-bottom: 1em;21
}22
23
label {24
color: grey;25
}26
27
select {28
display: block;29
width: 45%;30
margin-bottom: 1em;31
}32
33
input,34
select,35
button {36
padding: .5em 1em;37
}38
39
button {40
border: 2px solid #aa0088;41
background-color: #cc00aa;42
color: white;43
font-weight: bold;44
padding: .75em 1em;45
}46
47
button:hover {48
cursor: pointer;49
background-color: #aa0088;50
}51
52
input,53
select {54
border: 1px solid #888;55
}56
57
textarea {58
width: 98.5%;59
color: #888;60
}61
62
input:optional,63
select:optional {64
background-color: #f8f8f8;65
color: #888;66
}67
68
input:required,69
textarea:required {70
border-bottom: 3px solid #aa0088;71
}72
73
input:focus,74
select:focus,75
textarea:focus {76
outline: 0;77
box-shadow: 0 0 2px 1px #aa0088;78
}79
80
input:optional:focus,81
select:optional:focus {82
box-shadow: 0 0 2px 1px #aaa;83
}JS
1
1