Basic HTML : Form

HTML

7 & 10 of March

Basic HTML : Form

Lecture teach us how to make form by using HTML. HTML form is used to collect user input.

• The <form> element defines an HTML form

<form>
.
form elements
.
</form>

HTML forms contain form elements.

Form elements are different types of input elements checkboxes, radio buttons, submit buttons, text box, password box and more.

• Text Box

<input type="text"> defines a one-line input field for text input:

Example :

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

output

• Radio Button

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

output

• Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

output

• Password Box

Password field, the computer will display a bullet or asterisk.

Example

<form action="action_page.php">

My Password<input type="password" name="pwd" size=15 maxlength=15>

  
</form>

outcome

• Check Box

Allow Users to select more than one option. It specifies that an <input> element should be pre-selected (checked) when the page loads.

The checked attribute can be used with <input type="checkbox"> and <input type="radio">.

Example

<form action="demo_form.asp">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

output

• Select

Create a pop-up list from which any one option may be selected. The form attribute specifies one or more forms the drop-down list belongs to.

Example

<form>


<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</form>

output

• Text Area

The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

Example

<textarea rows="4" cols="50">
Welcome to zhaffari blog
</textarea>

output

• Hidden Input

Allows an input which is hidden from the user. This inpt type used for special purposes.

Example

<input type="hidden" name="sendTo" value="adm@uum.edu.my">
The output will not shown to the user


This is an example of form using HTML that I've made in the lab.

ouput

Code

thank you have a nice day