Scribd
Upload
30 views

Lec # 05 HTML - V

This document summarizes HTML form elements. It discusses: 1. Forms allow users to provide information to a website through interactive elements like text fields, checkboxes, buttons, and scrollable lists. 2. The <form> tag contains all form components and specifies attributes like the submission method and URL. 3. Common input types include single-line text, passwords, text areas, submit/reset buttons, checkboxes, radio buttons, drop-down lists, and file uploads. 4. New HTML5 input types have been introduced like numbers, ranges, dates, times, searches, emails, URLs and colors.

Uploaded by

Radhay35335
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views

Lec # 05 HTML - V

This document summarizes HTML form elements. It discusses: 1. Forms allow users to provide information to a website through interactive elements like text fields, checkboxes, buttons, and scrollable lists. 2. The <form> tag contains all form components and specifies attributes like the submission method and URL. 3. Common input types include single-line text, passwords, text areas, submit/reset buttons, checkboxes, radio buttons, drop-down lists, and file uploads. 4. New HTML5 input types have been introduced like numbers, ranges, dates, times, searches, emails, URLs and colors.

Uploaded by

Radhay35335
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

Web Engineering

Lecture 05
Forms
(HTML5 - V)

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

4
Interactive Forms (3)
• Are GUI-based

• May contain:
– Text fields
– Check boxes
– Buttons
– Scrollable lists

5
TEXT Elements
• In HTML5 number different types of text
elements for forms are grown.

• Only few are supported by all the browsers.


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.

8
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” />
</form>
EXAMPLE
• <body>
<h1>HTML Forms</h1>
<form name=“” method=“post” action=“”>
<p>
Name: <input type=“text” name=“formName”
size=“25” maxlength=“25” />
</p>
</form>
</body>

10
Single-Line Text Input Field
<INPUT
type=“text”
name=“fieldName”
size=“widthInCharacters”
maxlength=“limitInCharacters”
value=“initialDefaultValue”
placeholder=“initialDefaultValue”
required
/>
11
12
Password Input Field
<INPUT
type=“password”
name=“fieldName”
size=“widthInCharacters”
maxlength=“limitInCharacters”
value=“initialDefaultValue”
placeholder=“initialDefaultValue”
/>

13
Multi-Line Text Input Area
<TEXTAREA
name=“areaName”
cols=“widthInCharacters”
rows=“numberOfLines”
spellcheck=“true/false”
>
</TEXTAREA>

14
EXAMPLE
<TEXTAREA
name=“message”
cols=“38”
rows=“6”
wrap=“virtual”
>
</TEXTAREA>

wrap=“virtual” specifies that text in the box


will wrap lines as needed
15
Submit Button Input

<INPUT
type=“submit”
name=“buttonName”
value=“displayedText”
/>

16
Reset Button Input Element
(Resets the contents of a form to default values)

<INPUT
type=“reset”
value=“dispalyedText”
>

17
18
<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>
19
</FORM>
20
<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> 21
Checkbox Input Element
<INPUT
type=“checkbox”
name=“checkboxName”
checked
value=“checkedValue”
/>

22
23
Radio Button Input Element
<INPUT
type=“radio”
name=“radioButtonName”
checked
value=“selectedValue”
/>

24
25
<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>
26
</form>
27
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>
28
29
File Upload Input Element

<INPUT
type=“file”
name=“uploadfile”
enctype=“multipart/form-data”
size=“35”
>

30
Date Input Element

<INPUT
type=“date”
name=“date1”
pattern=“\d{4}-\d{2}-\d{2}”
title=“YYYY-DD-MM”
>

31
Number Input Element

<INPUT
type=“number”
name=“number1”
min=“1”
max=“5”
value=“1”
/>

32
Range Input Element

<INPUT
type=“range” name=“range1”
min=“0”
max=“100”
step=“10”
value=“20”
/>

33
Search Input Element

<INPUT
type=“search”
name=“search1”
/>

34
URL Input Element

<INPUT
type=“url” name=“url1”
/>

35
Color Input Element

<INPUT
type=“color”
name=“color1”
value=“#336699”
/>

36
16 Possible Values for the “type”
Attribute of <INPUT> tag
1. text 9. url
2. password 10. email
3. hidden 11. tel
4. checkbox 12. time
5. radio 13. date
6. file 14. search
7. reset 15. range
8. submit 16. datetime-local
37

You might also like