Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
46 views16 pages

HTML Form Elements Guide

This document discusses HTML forms and form elements. It explains that forms are used to collect user input which is then sent to a server. The main form elements covered are: text, email, number, password, date, time, textarea, radio, select, checkbox, submit, button, and file. For each element, the document provides the code syntax and examples of how to implement the element with and without a label. It also covers some common attributes that can be applied to restrict or modify form elements.

Uploaded by

Ali Maahiiir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views16 pages

HTML Form Elements Guide

This document discusses HTML forms and form elements. It explains that forms are used to collect user input which is then sent to a server. The main form elements covered are: text, email, number, password, date, time, textarea, radio, select, checkbox, submit, button, and file. For each element, the document provides the code syntax and examples of how to implement the element with and without a label. It also covers some common attributes that can be applied to restrict or modify form elements.

Uploaded by

Ali Maahiiir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

FACULTY OF INFORMATION

TECHNOLOGY AND ENGINEERING

CSE 131

INTERNET AND WORLD WIDE WEB (WEB TECHNOLOGIES)

WITH

SHEIDU HALILU
[email protected]
HTML Forms
An HTML form is used to collect user input. The user
input is most often sent to a server for processing.

<form>
..form elements
</form>
Form Elements
HTML form elements are used to capture user input.
Every element consist of


Type

Attributes

Name: for use in sending data to server

Id: for use in the user interface

Class: generic indicator

Placeholder (optional)

Label (optional)
The <input> Element
The HTML <input> element is the most used form element. An <input> element
can be displayed in many ways, depending on the type attribute.


Text Field Radio


Email Field Select


Number Field Checkbox


Password Field Submit


Textarea Button
Text Field

<input type=”text” id=”username” name=”username”>

With label

<label for="username">username:</label><br>
<input type=”text” id=”username” name=”username”>
Email Field

<input type=”email” id=”email” name=”email”>

With label

<label for="email">Email:</label><br>
<input type=”email” id=”email” name=”email”>
Number Field

<input type=”number” id=”age” name=”age”>

With label

<label for="age">Age:</label><br>
<input type=”number” id=”age” name=”age”>
Password Field

<input type=”password” id=”password” name=”password”>

With label

<label for="password">Password:</label><br>
<input type=”password” id=”password” name=”password”>
Date Field
<input type=”date” id=”date” name=”date”>

Time Field
<input type=”time” id=”time” name=”time”>

DateTime
<input type=”datetime-local”>
Textarea Field

<textarea id=”bio” name=”bio” rows=”6” cols="30”></textarea>

With label

<label for="bio">Bio:</label><br>
<textarea id=”bio” name=”bio” rows=”6” cols="30”></textarea>
Radio box Note: name is the same in all field

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


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

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


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

<input type="radio" id="other" name="gender" value="other">


<label for="other">Other</label>
Select Note: value is the data to be send
to the server

<select id=”state” name=”state”>


<option value=”abia”>Abia</option>
<option value=”adamawa>Adamawa</option>
<option value=”akwa_ibom”>Akwa Ibom</option>
</select>
Checkbox

<form>
<input type="checkbox" id="bike” name="bike">
<label for="bike"> I have a bike</label><br>
<input type="checkbox" id="car" name="car">
<label for="car"> I have a Car</label><br>
<input type="checkbox" id="boat" name="boat">
<label for="boat"> I have a boat</label>
</form>
submit

<input type=”submit” value=”submit”>

Button
<input type=”button” value=”submit”>
File

<input type=”file” id=”picture” name=”picture”


Restrictions

 Required
 Min, max
 auto_focus
 Disabled
Readonly

You might also like