Creating Interactive Web Forms Using HTML and CSS Styling
Explore how to design interactive web forms with HTML for user input fields and CSS styling for enhanced visual appeal. Learn about interesting properties that can be applied to input boxes, such as placeholders, readonly, checked, maxlength, size, and required attributes. Discover how to create select boxes for user selection and enhance user experience with select options pre-selected.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Web Forms V1.01
showit.pl Your PC https://csunix.mohawkcollege.ca/tooltime/showit.pl
ECHO Server 1 <form name="information-form" method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl"> <-- form variables & values - - - go here --> <input type="submit" name="goButton" value="Go"> </form>
/* CSS Styling */ <style> body { } background-color: lightgray; </style> table, td { } border: 2px solid green; border-collapse: collapse; td { } sup { } padding: 5px; width: 200px; color: red;
A Text Box <body> <h1>Information Form</h1> <form name= campForm" method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl"> <table> <tr> <td>Name</td> <td> <input type="text" name="fullName" value="" maxlength="60" size="50"> </td> </tr> <tr> <td colspan="2"> <input type="submit" name="goButton" value="Go"> </td> </tr> </table> </form> </body>
Text Box when you push the Go button
Interesting Properties that can be used in Input Boxes placeholder - Specifies a short hint that describes the expected value of an <input> element readonly - Specifies that an input field is read-only checked - Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio") maxlength - Specifies the maximum number of characters allowed in an <input> element size - Specifies the width, in characters, of an <input> element required - Specifies that an input field must be filled out before submitting the form
<!-- Select Box --> <tr> <td>Age</td> <td> <select name="age"> <option>4</option> <option>5</option> <option>6</option> <option selected>7</option> <option>8</option> <option>9</option> <option>10</option> </td> </select> </tr>
Select Box when you push the Go button
<!-- TextArea Box --> cols refers to number of characters allowed per row <tr> MAJOR POINT: eliminate any tabs or white space ahead of <textarea> tags <td>Medical Notes</td> <textarea name="medicalNotes" rows="5" cols="40"> </textarea> </td> </tr> <td>
Textarea Box when you push the Go button
<!-- Radio Buttons --> gender defines the name of the radio group, within any group only ONE option may be chosen <tr> <td>Gender</td> <td> <input type="radio" name="gender" value="M" id="male" checked="checked"> <label for="male">Male</label> <br> </tr> </td> <input type="radio" name="gender" value="F" id="female"> <label for="female">Female</label> The value property, is what is sent to the server
<!-- Radio Buttons --> <tr> <td>Gender</td> <td> <input type="radio" name="gender" value="M" id="male" checked="checked"> <label for="male">Male</label> <br> </tr> </td> <input type="radio" name="gender" value="F" id="female"> <label for="female">Female</label> The id and for: MUST be the same .this is what links the two lines together
Radio Button Group when you push the Go button
<!-- Checkboxes --> referrer defines the name of the checkbox group <tr> </tr> <td>How did you hear about us?</td> <td> The id and for: MUST be the same .this is what links the two lines together <input type="checkbox" name="referrer" value="Newspaper id= news > <label for= news >Newspaper</label> <input type="checkbox" name="referrer" value="Web id= web checked= checked > <label for= web >Web</label> </td> The value property, is what is sent to the server
Checkbox Group when you push the Go button
<-- Datalist --> list and id link the two lines together <tr> </tr> <td>Browser</td> <td> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </td>
DataList Box when you push the Go button
<-- Email --> for and id link the two lines together <tr> <td>Email</td> <td> <label for="email">Enter your email:</label><br> <input type="email" id="email" name="email"> </tr> </td>
Email Box when you push the Go button
<-- Number --> for and id link the two lines together <tr> <td> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </td> </tr>
Number Box when you push the Go button
<-- Date --> for and id link the two lines together <tr> <td> </td> </tr> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday">
Date Box when you push the Go button
