SlideShare a Scribd company logo
1
Web Engineering
Forms
Lecture 04
FORMS
• Its how HTML does interactivity. There are quite
new feature in HTML5. But the fundamental
idea does not change since the first web
browser.
• There basically two ways to use forms in HTML.
 Traditionally they are mostly use to interface with
the process on server using PHP/ASP.
 Today they are often use to interface with JavaScript
running on client machine.
Interactive Forms (1)
• Without forms, a Web site is “read-only” – it
just provides information to the user.
• Forms enable the user to provide information
to the Web site. For example, the user can:
– Perform searches on Web site
– Give comments
– Ask for info that is not available on the Website
– Place order for goods and services
4
Interactive Forms (2)
• Can be simple or very complex
• Can fill a whole page or just a single line
• Can contain a single element or many
• Are always placed between the <BODY> and
</BODY> tags of a Web page
5
Interactive Forms (3)
• Are GUI-based
• May contain:
– Text fields
– Check boxes
– Buttons
– Scrollable lists
FORM Tag
• All of the component of a form appear in the
content of a <form> tag.
• Example:
<form name=“sendEmail” method=“post”
action=“sendMailServerScriptURL”
autocomplete=“off” > </form>
• The action attribute specifies the URL of the
application on the web server that is to be
called when the user clicks the SUBMIT button.
• The method attribute specifies one of the two
techniques, get or post. Used to pass the form
data to the server.
INPUT Tag
• <input> tag is used for text, passwords,
checkboxes, radio buttons, action button reset
and submit.
• One attribute of <input> tag is type, which
specifies particular kind of controls
• Example
<form name=“sendEmail” method=“get”
action=“”>
<input type=“text” name=“name” size=“25”
maxlength=“25” />
</form>
8
Single-Line Text Input Field
<INPUT
type=“text”
name=“fieldName”
size=“widthInCharacters”
maxlength=“limitInCharacters”
value=“initialDefaultValue”
placeholder=“initialDefaultValue”
autofocus
required
readonly
/>
9
10
Password Input Field
<INPUT
type=“password”
name=“fieldName”
size=“widthInCharacters”
maxlength=“limitInCharacters”
value=“initialDefaultValue”
placeholder=“initialDefaultValue”
/>
11
Multi-Line Text Input Area
<TEXTAREA
name=“areaName”
cols=“widthInCharacters”
rows=“numberOfLines”
spellcheck=“true/false”
>
</TEXTAREA>
EXAMPLE
<TEXTAREA
name=“message”
cols=“38”
rows=“6”
wrap=“virtual”
>
</TEXTAREA>
wrap=“virtual” specifies that text in the box
will wrap lines as needed
12
13
Submit Button Input
<INPUT
type=“submit”
name=“buttonName”
value=“displayedText”
/>
14
Reset Button Input Element
(Resets the contents of a form to default values)
<INPUT
type=“reset”
value=“dispalyedText”
>
15
16
<FORM name="sendEmail" method="post" action=“sendMailScriptURL">
<table><tr>
<td>From: </td>
<td><INPUT type="text" name="sender" size="50“ /></td>
</tr><tr>
<td>To: </td>
<td><INPUT type=“email" name="receiver" size="50“ /></td>
</tr><tr>
<td>Subject: </td>
<td><INPUT type="text" name="subject" size="50“ /></td>
</tr><tr>
<td valign="top">Message: </td>
<td><TEXTAREA name="message" cols="38"rows="6"> </TEXTAREA></td>
</tr><tr>
<td colspan="2" align="right">
<INPUT type="submit" name="sendEmail" value="Send eMail“ />
</td>
</tr></table>
</FORM>
17
18
<form name="login" method="post" action="loginScript">
<table><tr>
<td>User Name: </td>
<td>
<input type="text" name="userName" size="10“ />
</td>
</tr><tr>
<td>Password: </td>
<td>
<input type="password" name="password" size="10“ />
</td>
</tr><tr>
<td colspan="2" align="right">
<input type="submit" name="login" value="Log me in“ />
</td>
</tr></table>
</form>
19
Checkbox Input Element
<INPUT
type=“checkbox”
name=“checkboxName”
checked
value=“checkedValue”
/>
20
21
Radio Button Input Element
<INPUT
type=“radio”
name=“radioButtonName”
checked
value=“selectedValue”
/>
22
23
<form name="login" method="post" action="loginScript">
<table><tr>
<td>User Name: </td>
<td><input type="text" name="userName" size="10"></td>
</tr><tr>
<td>Password: </td>
<td><input type="password" name="password" size="10"></td>
</tr><tr>
<td valign="top">Logging in from:</td>
<td>
<input type="radio" name="from" value="home“ checked=“checked”>
Home<br>
<input type="radio" name="from" value="office"> Home<br>
<input type="radio" name="from" value="university" > University
</td>
</tr><tr>
<td colspan="2" align="right">
<input type="submit" name="login" value="Log me in">
</td>
</tr></table>
</form>
24
25
Select from a (Drop Down) List
<SELECT
name=“listName”
size=“numberOfDisplayedChoices”
multiple
>
<OPTION value=“value1”> text1
<OPTION value=“value2” selected> text2
<OPTION value=“value3”> text2
…
…
</SELECT>
26
27
File Upload Input Element
<INPUT
type=“file”
name=“uploadfile”
enctype=“multipart/form-data”
size=“35”
>
28
Date Input Element
<INPUT
type=“date”
name=“date1”
pattern=“d{4}-d{2}-d{2}”
title=“YYYY-DD-MM”
>
29
Number Input Element
<INPUT
type=“number”
name=“number1”
min=“1”
max=“5”
value=“1”
/>
30
Range Input Element
<INPUT
type=“range”
name=“range1”
min=“0”
max=“100”
step=“10”
value=“20”
/>
31
Search Input Element
<INPUT
type=“search”
name=“search1”
/>
32
URL Input Element
<INPUT
type=“url”
name=“url1”
/>
33
Color Input Element
<INPUT
type=“color”
name=“color1”
value=“#336699”
/>
34
16 Possible Values for the “type”
Attribute of <INPUT> tag
1. text
2. password
3. hidden
4. checkbox
5. radio
6. file
7. reset
8. submit
9. url
10. email
11. tel
12. time
13. date
14. search
15. range
16. datetime-local

More Related Content

PPTX
PHP AST 徹底解説
PDF
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
PPTX
Introduction to Node.js
PDF
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
PDF
なぜ人は必死でjQueryを捨てようとしているのか
PPTX
Html form tag
PDF
MySQL 5.7にやられないためにおぼえておいてほしいこと
PDF
Domain Modeling Made Functional (DevTernity 2022)
PHP AST 徹底解説
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
Introduction to Node.js
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
なぜ人は必死でjQueryを捨てようとしているのか
Html form tag
MySQL 5.7にやられないためにおぼえておいてほしいこと
Domain Modeling Made Functional (DevTernity 2022)

What's hot (20)

PPTX
Windowforms controls c#
KEY
やはりお前らのMVCは間違っている
PDF
Basics of JavaScript
PDF
FizzBuzzで学ぶJavaの進化
PPTX
HTML frames and HTML forms
PPTX
StackStorm Workflowの設計
PDF
PHP の GC の話
PPSX
HTML5 - Forms
PDF
関数型プログラミングのデザインパターンひとめぐり
PDF
あの日見たMVCを僕たちはまだ知らない for RoR
PDF
How To Become Better Engineer
PDF
JenkinsとjMeterで負荷テストの自動化
PPT
PHP - Introduction to PHP Forms
PPT
Php forms
PDF
Virtual Memory and Paging
PPTX
Input-Buffering
PDF
Git超入門_座学編.pdf
PDF
Tackling Complexity
PDF
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
PDF
Asp.net mvc basic introduction
Windowforms controls c#
やはりお前らのMVCは間違っている
Basics of JavaScript
FizzBuzzで学ぶJavaの進化
HTML frames and HTML forms
StackStorm Workflowの設計
PHP の GC の話
HTML5 - Forms
関数型プログラミングのデザインパターンひとめぐり
あの日見たMVCを僕たちはまだ知らない for RoR
How To Become Better Engineer
JenkinsとjMeterで負荷テストの自動化
PHP - Introduction to PHP Forms
Php forms
Virtual Memory and Paging
Input-Buffering
Git超入門_座学編.pdf
Tackling Complexity
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
Asp.net mvc basic introduction
Ad

Viewers also liked (20)

PPTX
Web engineering - An overview about HTML
PDF
PROGRESS - CSS BASIC
PPTX
Web Engineering - Introduction to CSS
PDF
[Basic HTML/CSS] 4. html - form tags
PPTX
Need for Web Engineering
PDF
[Basic HTML/CSS] 3. html - table tags
PPTX
Java script basics
PDF
Java script introducation & basics
 
PPTX
javascript3
PPTX
Web engineering - Measuring Effort Prediction Power and Accuracy
PPTX
Web Engineering - Web Application Testing
PDF
[Basic HTML/CSS] 6. css - box sizing, display, margin, padding
PDF
[CSS Drawing] Basic Tutorial (라이언 그리기)
PDF
[Basic HTML/CSS] 7. project
PDF
HTML Dasar : #10 Form
PPTX
Angular js for beginners
PDF
Basic css-tutorial
PPTX
HTML Forms
PPT
Basic css
PPT
Tables and Forms in HTML
Web engineering - An overview about HTML
PROGRESS - CSS BASIC
Web Engineering - Introduction to CSS
[Basic HTML/CSS] 4. html - form tags
Need for Web Engineering
[Basic HTML/CSS] 3. html - table tags
Java script basics
Java script introducation & basics
 
javascript3
Web engineering - Measuring Effort Prediction Power and Accuracy
Web Engineering - Web Application Testing
[Basic HTML/CSS] 6. css - box sizing, display, margin, padding
[CSS Drawing] Basic Tutorial (라이언 그리기)
[Basic HTML/CSS] 7. project
HTML Dasar : #10 Form
Angular js for beginners
Basic css-tutorial
HTML Forms
Basic css
Tables and Forms in HTML
Ad

Similar to Web engineering - HTML Form (20)

PPT
Web forms and html (lect 4)
PPT
05 html-forms
PPTX
Html Forms for lecture BSIT SSC HCI LECTURE
PPT
20 html-forms
PPT
Html Forms for creating frames and frameset
PPT
PPT
Chapter9
PPT
Html class-04
PPT
Html,Css and Javascript Forms using different tags
PPT
Html Forms.ppt
PPT
Chapter 9 - Web Design
PPTX
1. Lecture 1 WT- Forms.pptxl;kjhgfdsfghj
PPTX
HTML Forms: The HTML element represents a document section containing interac...
PPTX
HYPERTEXT MARK UP LANGUAGES (HTML) FORMS
PPTX
Html forms
PPT
Web forms and html lecture Number 4
PPT
20-html-forms.ppt
PPTX
Web input forms.pptx
PPT
11-html-forms.ppt
PPTX
Html forms
Web forms and html (lect 4)
05 html-forms
Html Forms for lecture BSIT SSC HCI LECTURE
20 html-forms
Html Forms for creating frames and frameset
Chapter9
Html class-04
Html,Css and Javascript Forms using different tags
Html Forms.ppt
Chapter 9 - Web Design
1. Lecture 1 WT- Forms.pptxl;kjhgfdsfghj
HTML Forms: The HTML element represents a document section containing interac...
HYPERTEXT MARK UP LANGUAGES (HTML) FORMS
Html forms
Web forms and html lecture Number 4
20-html-forms.ppt
Web input forms.pptx
11-html-forms.ppt
Html forms

Recently uploaded (20)

PPTX
Lesson notes of climatology university.
PDF
Pre independence Education in Inndia.pdf
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
01-Introduction-to-Information-Management.pdf
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PPTX
PPH.pptx obstetrics and gynecology in nursing
PDF
Insiders guide to clinical Medicine.pdf
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PDF
VCE English Exam - Section C Student Revision Booklet
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PDF
Sports Quiz easy sports quiz sports quiz
PPTX
GDM (1) (1).pptx small presentation for students
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PPTX
Cell Types and Its function , kingdom of life
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
Lesson notes of climatology university.
Pre independence Education in Inndia.pdf
O7-L3 Supply Chain Operations - ICLT Program
Module 4: Burden of Disease Tutorial Slides S2 2025
Supply Chain Operations Speaking Notes -ICLT Program
Microbial diseases, their pathogenesis and prophylaxis
STATICS OF THE RIGID BODIES Hibbelers.pdf
01-Introduction-to-Information-Management.pdf
2.FourierTransform-ShortQuestionswithAnswers.pdf
PPH.pptx obstetrics and gynecology in nursing
Insiders guide to clinical Medicine.pdf
102 student loan defaulters named and shamed – Is someone you know on the list?
VCE English Exam - Section C Student Revision Booklet
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Sports Quiz easy sports quiz sports quiz
GDM (1) (1).pptx small presentation for students
FourierSeries-QuestionsWithAnswers(Part-A).pdf
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Cell Types and Its function , kingdom of life
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx

Web engineering - HTML Form