| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>Lesson 16 Forms</title>
|
| <link rel="stylesheet" href="forms.css">
|
| </head>
|
| <body>
|
| <h2>Login</h2>
|
| <form action="./login" method="POST">
|
| <label>
|
| <span>Email</span>
|
| <input id="email" type="email">
|
| </label>
|
| <br>
|
| <label for="pass">Password</label>
|
| <input id="pass" type="password"><br>
|
| <input type="submit" value="Login">
|
| </form>
|
| <h2>My First Search Engine</h2>
|
| <!-- GET ?<параметр>=<значение>&<параметр>=<значение>&<параметр>=<значение> -->
|
| <form action="./search" method="GET">
|
| <input type="text"><br>
|
| <input type="submit" value="Search">
|
| <input type="reset" value="Clear">
|
| </form>
|
| <h2>Share your opinion!</h2>
|
| <form action="./message">
|
| <div>
|
| <label for="uname">Name: </label>
|
| <input type="text" id="uname" name="userName">
|
| </div>
|
| <div>
|
| <label for="email">Email: </label>
|
| <input type="email" id="email" name="userEmail">
|
| </div>
|
| <div>
|
| <label for="message">Message: </label>
|
| <textarea id="message" name="userMessage">
|
| </textarea>
|
| </div>
|
| <div>
|
| <label for="subscribe">Subscribe to news </span>
|
| <input type="checkbox" id="subscribe" name="subToNews">
|
| </div>
|
| <div>
|
| <p>How do you prefer to be adressed?</p>
|
| <input type="radio" value="mr" id="honor1" name="honorific">
|
| <label for="honor1">Mr.</label><br>
|
| <input type="radio" value="ms" id="honor2" name="honorific">
|
| <label for="honor2">Ms.</label><br>
|
| <input type="radio" value="mrs" id="honor3" name="honorific">
|
| <label for="honor3">Mrs.</label><br>
|
| <input type="radio" value="none" id="honor4" name="honorific">
|
| <label for="honor4">Just by name</label><br>
|
| </div>
|
| <div>
|
| <input type="submit" value="Send message">
|
| </div>
|
| </form>
|
| <h4>Fill details to order pizza</h4>
|
| <form>
|
| <div>
|
| <label>
|
| <span>Name</span>
|
| <input type="text">
|
| </label>
|
| </div>
|
| <div>
|
| <label>
|
| <span>Phone</span>
|
| <input type="text">
|
| </label>
|
| </div>
|
| <div>
|
| <label>
|
| <span>Address</span>
|
| <textarea></textarea>
|
| </label>
|
| </div>
|
| <div>
|
| <label>
|
| <span>Choose pizza:</span>
|
| <select id="pizzaName" name="PizzaName">
|
| <option>Margherita</option>
|
| <option>Marinara</option>
|
| <option>4 Cheeses</option>
|
| <option>Hawaii</option>
|
| </select>
|
| </label>
|
| <fieldset>
|
| <legend>Select size:</legend>
|
| <ul style="list-style: none">
|
| <li>
|
| <label>
|
| <input type="radio" id="small" name="size" value="S">
|
| <span>Small</span>
|
| </label>
|
| </li>
|
| <li>
|
| <label>
|
| <input type="radio" id="medium" name="size" value="M">
|
| <span>Medium</span>
|
| </label>
|
| </li>
|
| <li>
|
| <label>
|
| <input type="radio" id="large" name="size" value="L">
|
| <span>Large</span>
|
| </label>
|
| </li>
|
| </ul>
|
| </fieldset>
|
| <input type="submit" value="Order">
|
| </div>
|
| </form>
|
|
|
| <form>
|
| <label>
|
| <span>URL</span>
|
| <input type="url" id="url" name="userUrl">
|
| </label>
|
| <br>
|
| <label>
|
| <span>Date</span>
|
| <input type="date" id="userBirthdate" name="UserBirthdate">
|
| </label>
|
| <br>
|
| <label>
|
| <span>Genre</span>
|
| <input type="text" id="userGenre" name="Genre" list="genreSuggestions">
|
| <datalist id="genreSuggestions">
|
| <option>Comedy</option>
|
| <option>Action</option>
|
| <option>Drama</option>
|
| <option>Science Fiction</option>
|
| </datalist>
|
| </label>
|
| <br>
|
| <label>
|
| <span>Rating</span>
|
| <input type="number" id="userRating" name="Rating" min="1" max="10" step="1">
|
| </label>
|
| <br>
|
| <input type="submit">
|
| </form>
|
| </body>
|
| </html>
|