4-elements edit

forms  edit

Choose a shipping method:






New password must be 8-15 characters and include letters and numbers


Select your pizza toppings:


Copy
Edit
<!-- components/4-elements/forms.php --> <form action="/signup" method="post"> <p> <fieldset> <legend>Choose a shipping method:</legend> <input id="overnight" type="radio" name="shipping" value="overnight"> <label for="overnight">Overnight</label><br> <input id="twoday" type="radio" name="shipping" value="twoday"> <label for="twoday">Two day</label><br> <input id="ground" type="radio" name="shipping" value="ground"> <label for="ground">Ground</label> </fieldset> </p> <p> <label for="name">Name</label><br> <input id="name" type="text" name="textfield"> </p> <p> <label for="email">Email</label><br> <input id="email" type="email" name="email" required> </p> <p> <label for="phone">Phone number</label><br> <input id="phone" type="tel" name="phone"> </p> <p> <label for="password">Password</label><br> <input id="password" type="password" name="password" aria-describedby="newpass"><br> <span id="newpass">New password must be 8-15 characters and include letters and numbers</span> </p> <p> <label for="address">Enter your address</label><br> <textarea id="address" name="addresstext"></textarea> </p> <p> <label for="favcity">Choose your favorite city?</label> <select id="favcity" name="select"> <option value="1">Amsterdam</option> <option value="2">Buenos Aires</option> <option value="3">Delhi</option> <option value="4">Hong Kong</option> <option value="5">London</option> <option value="6">Los Angeles</option> <option value="7">Moscow</option> <option value="8">Mumbai</option> <option value="9">New York</option> <option value="10">Sao Paulo</option> <option value="11">Tokyo</option> </select> </p> <p> <fieldset> <legend>Select your pizza toppings:</legend> <input id="ham" type="checkbox" name="toppings" value="ham"> <label for="ham">Ham</label><br> <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni"> <label for="pepperoni">Pepperoni</label><br> <input id="mushrooms" type="checkbox" name="toppings" value="mushrooms"> <label for="mushrooms">Mushrooms</label><br> <input id="olives" type="checkbox" name="toppings" value="olives"> <label for="olives">Olives</label> </fieldset> </p> <p> <input type="submit" name="submit" value="Submit Search" title="Submit Search"> <input type="reset" name="reset" value="Reset" title="Reset"> <button>Activate</button> </p> </form>
Copy
Copy
Edit
/* scss/4-elements/_forms.scss */ fieldset { border: none; } input, textarea { width: 14.924rem; padding: 0.533rem; border: 1px solid var(--color-wmsilver-25); } [type="checkbox"], [type="radio"] { width: auto; margin-right: 0.35533rem; } [type="submit"] { width: auto; min-width: 2.132rem; margin-left: 0.35533rem; padding: 0.533rem; color: white; border: 1px solid var(--color-wmgreen-90); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: var(--color-wmgreen-90); font-weight: 400; }