Creating Interactive Web Forms Using HTML and CSS Styling

Web Forms

V1.01

https://csunix.mohawkcollege.ca/tooltime/showit.pl

Your PC

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>

<style>

body {

background-color: lightgray;

table, td {

border: 2px solid green;

border-collapse: collapse;

td {

padding: 5px;

width: 200px;

sup {

color: red;

</style>

/* CSS Styling */

<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>

A Text Box

when you push

the Go button

Text Box

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

<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>

</select>

</td>

</tr>

<!-- Select Box -->

when you push

the Go button

Select Box

<tr>

<td>Medical Notes</td>

<td>

<textarea name="medicalNotes"  rows="5" cols="40">

</textarea>

</td>

</tr>

<!-- TextArea Box -->

MAJOR POINT:

eliminate any tabs

or white space

ahead of

<textarea> tags

“cols” refers to

number of

characters

allowed per row

when you push

the Go button

Textarea Box

<tr>

<td>Gender</td>

<td>

<input type="radio" name="gender" value="M"   id="male"   checked="checked">

<label for="male">Male</label>

<br>

<input type="radio" name="gender" value="F" id="female">

<label for="female">Female</label>

</td>

</tr>

<!-- Radio Buttons -->

“gender” defines the name of the radio

group, within any group only ONE option

may be chosen

The “value” property, is what is sent to

the server

<tr>

<td>Gender</td>

<td>

<input type="radio" name="gender" value="M"   id="male"   checked="checked">

<label for="male">Male</label>

<br>

<input type="radio" name="gender" value="F" id="female">

<label for="female">Female</label>

</td>

</tr>

<!-- Radio Buttons -->

The “id” and “for: MUST be the same

….this is what links the two lines together

when you push

the Go button

Radio Button Group

<tr>

<td>How did you hear about us?</td>

<td>

<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>

</tr>

<!-- Checkboxes -->

“referrer” defines the name of the

checkbox group

The “value” property, is what is sent to

the server

The “id” and “for: MUST be the same

….this is what links the two lines together

when you push

the Go button

Checkbox Group

<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>

</tr>

<-- Datalist -->

“list” and “id”  link the two lines together

when you push

the Go button

DataList Box

<tr>

<td>Email</td>

<td>

<label

for="email">

Enter your email:</label><br>

<input type="email"

id="email"

name="email">

</td>

</tr>

<-- Email -->

“for” and “id”  link the two lines together

when you push

the Go button

Email Box

<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 -->

“for” and “id”  link the two lines together

when you push

the Go button

Number Box

<tr>

  <td>

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday">

  </td>

</tr>

<-- Date -->

“for” and “id”  link the two lines together

when you push

the Go button

Date Box

https://www.w3schools.com/html/html_form_input_types.asp

Slide Note

Embed Share

Download

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.

saskia Follow

Uploaded on Jul 11, 2024 | 2 Views

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

 <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

 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

 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

 <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

 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">