SlideShare uma empresa Scribd logo
1 de 41
Baixar para ler offline
HTML Input Elements
Engr. Esmeraldo T. Guimbarda Jr.
Forms
An HTML form is a section of a document containing
normal content, markup, special elements called
controls (checkboxes, radio buttons, menus, etc.), and
labels on those controls. Users generally "complete" a
form by modifying its controls (entering text, selecting
menu items, etc.), before su bmitting the form to an
agent for processing (e.g., to a Web server, to a mail
server, etc.)
Input Elements
The most important form element is the input
element. The input element is used to select user
information.
An input element can vary in many ways, depending
on the type attribute. An input element can be of type
text field, checkbox, password, radio button, submit
button, and more.
The most used input types are described below.
Text Field
Text field defines a one-line input field that a user can
enter text into.
Attributes:
size - defines the width of the field. This attribute
specifies how many visible characters it can contain.
maxlength - defines the maximum length of the field.
It specifies how many characters can be entered in the
field.
name - adds an internal name to the field so that the
program that handles forms can identify a specific
field.
value - defines what will appear in the text field as a
default value.
align - defines how the field is aligned. Valid entries
are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP
(aligns the top of the text field with the top of the
tallest text in the line), BASELINE (aligns the text field
with the baseline of the current line), ABSMIDDLE
(aligns text field with the middle of the current line) ,
ABSBOTTOM (aligns the text field with the bottom of
the current line).
Syntax:
Example:
Output:
Password Field
Password field is the same as a text field. The
difference is that what users entered into a password
field will be masked or shown as asterisks or circles to
prevent others from reading what has been inputted.
Attributes:
size - defines the width of the field. This attribute
specifies how many visible characters it can contain.
maxlength - defines the maximum length of the field.
It specifies how many characters can be entered in the
field.
name - adds an internal name to the field so that the
program that handles forms can identify a specific field.
value - defines what will appear in the password field
as a default value.
align - defines how the field is aligned. Valid entries
are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP
(aligns the top of the text field with the top of the
tallest text in the line), BASELINE (aligns the text field
with the baseline of the current line), ABSMIDDLE
(aligns text field with the middle of the current line) ,
ABSBOTTOM (aligns the text field with the bottom of
the current line).
tabindex - defines in which order the different fields
should be activated when the visitor clicks the tab key
Syntax:
Example:
Output:
Radio Button
Radio buttons let a user select ONLY ONE of a limited
number of choices.
Attributes:
name - tells which group of radio buttons the field
belongs to. When you select one button, all other
buttons in the same group would be unselected. If
the group of a specific button is not specified, you
could only have one group of radio buttons on each
page.
value - defines what will be submitted to the server if
align - defines how the radio button is aligned. Valid
entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
TEXTTOP (aligns the top of the text field with the top
of the tallest text in the line), BASELINE (aligns the
text field with the baseline of the current line),
ABSMIDDLE (aligns text field with the middle of the
current line) , ABSBOTTOM (aligns the text field with
the bottom of the current line).
tabindex - defines in which order the different fields
should be activated when the visitor clicks the tab key.
Syntax:
Example:
Output:
Checkboxes
Checkboxes let a user select ZERO or MORE options of
a limited number of choices.
Attributes:
name - adds an internal name to the field so that the
program that handles the form can identify the fields.
value - defines what will be submitted to the server if
selected.
align - defines how the field is aligned. Valid entries
are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP
(aligns the top of the text field with the top of the
tallest text in the line), BASELINE (aligns the text field
with the baseline of the current line), ABSMIDDLE
(aligns text field with the middle of the current line) ,
ABSBOTTOM (aligns the text field with the bottom of
the current line).
tabindex - defines in which order the different fields
should be activated when the visitor clicks the tab key.
Syntax:
Example:
Output:
Submit Button
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's
action attribute. The file defined in the action attribute
usually does something with the received input.
Attributes:
name - adds an internal name to the button so the
program that handles the form doesn't confuse the
button with the other fields.
value - defines what is written on the button.
align - defines how the field is aligned. Valid entries
are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP
(aligns the top of the text field with the top of the
tallest text in the line), BASELINE (aligns the text field
with the baseline of the current line), ABSMIDDLE
(aligns text field with the middle of the current line) ,
ABSBOTTOM (aligns the text field with the bottom of
the current line).
tabindex - defines in which order the different fields
should be activated when the visitor clicks the tab key.
Syntax:
Example:
Output:
Drop-down Menu
Drop-down menus are probably the most flexible
objects you can add to your forms. Depending on your
settings, drop-down menus can serve the same
purpose as radio buttons (one selection only is
allowed) or check boxes (multiple selections are
allowed).
The advantage of a drop-down menu, compared to
radio buttons or check boxes, is that it takes up less
space. But that is also a disadvantage because people
can't immediately see all options in the menu.
<select> tag Attributes:
name - adds an internal name to the field so the
program that handles the form can identify the fields.
size - defines how many items should be visible at a
time. The default is one item.
multiple - allows for multiple selections if present.
<option> tag Attributes:
value - defines what will be submitted if the item is
selected.
Syntax:
Example:
Output:
Activity:
1. Create a new file using Notepad++.
Open the application Notepad++. Click File then
clickNew or press Ctrl+N on your keyboard. Type the
structure of an HTML document so that later on, you’ll
just have to fill the contents of each part.
2. Save the HTML document that you just made.
Click File then Save As or press Ctrl+Alt+S on your
keyboard. Choose where you want to save your file by
clicking the drop-down field on the topmost part of the
pop up window. Change the File name to signupand
the Save as Type to Hyper Text Markup Language
file. Click Save when done
3. Observe what are the contents of a signup page.
Observe the sign up pages of different social
networking sites like Facebook or Twitter to know
what are the information being asked from the users.
4. Create sign up page.
Add a title to the webpage and headings.
5. Finalize what should be included in the form. You’ve
noticed from the existing social networking sites that it
always ask for the first name, last name,
username, password, gender, birthday and if the
user agrees to the terms and services of the
website. Let’s also ask for the following information
from the users plus the department where they
belong.
Start creating the form. To organize form content, use
a two column table. Start with the information that will
use text fields.
Use text field < input type=”text” >for the first
name, last name and username.
Note: Insert the code below after “<h3>Sign up here: </h3>”
Next are the information that would need the
password field < input type=”password” > (password
and password confirmation).
Radio button will be used to select the user’s gender.
Create radio buttons using the syntax
< input type=”radio” >
To select birthday, drop-down menu will be used. The
syntax < select >< option >Option1 for the birth
month, day and year will be followed.
Or you may also try input type: datetime-local
Syntax: <input type="datetime-local">
For the terms and conditions of the website, the user
must agree that he/she has read and agree to it by
marking the checkbox with the syntax
< input type=”checkbox” >. Finally, to submit the
inputted data to the server, a submit button
< input type=”submit” > will be used.
Note: Insert the code below after
</table>
6. Save the completed HTML document and check the
final output.
When done putting all required form elements, click
File > Save. To check the webpage that you just
created, go to the location where you previously saved
your file entitled signup.html. Double-click the file
and view the webpage. Your page should look
something like the image on the right.
Tm   1st quarter - 2nd meeting

Mais conteúdo relacionado

Mais procurados (11)

Soft skills (ICT) part2
Soft skills (ICT) part2Soft skills (ICT) part2
Soft skills (ICT) part2
 
Filter Data in Excel Services SharePoint 2010 - EPC Group
Filter Data in Excel Services SharePoint 2010 - EPC GroupFilter Data in Excel Services SharePoint 2010 - EPC Group
Filter Data in Excel Services SharePoint 2010 - EPC Group
 
Tut 06 (forms)
Tut 06 (forms)Tut 06 (forms)
Tut 06 (forms)
 
Whatsapp survery report
Whatsapp survery  reportWhatsapp survery  report
Whatsapp survery report
 
Microsoft 2010 word glossary
Microsoft 2010 word glossaryMicrosoft 2010 word glossary
Microsoft 2010 word glossary
 
Word project 1 part 1
Word project 1 part 1Word project 1 part 1
Word project 1 part 1
 
Create formsexcel
Create formsexcelCreate formsexcel
Create formsexcel
 
Project excel
Project excelProject excel
Project excel
 
Computer Word Lec2
Computer  Word Lec2Computer  Word Lec2
Computer Word Lec2
 
presentation on excel and word
presentation on excel and wordpresentation on excel and word
presentation on excel and word
 
06 Intro to MS Word
06 Intro to MS Word06 Intro to MS Word
06 Intro to MS Word
 

Destaque

مهارات البحث الاقتصادي للصحفيين
مهارات البحث الاقتصادي للصحفيينمهارات البحث الاقتصادي للصحفيين
مهارات البحث الاقتصادي للصحفيين
Ibrahim El Ghitany
 
Locations updated
Locations updatedLocations updated
Locations updated
olivermcg
 
Basic kinematic concepts
Basic kinematic conceptsBasic kinematic concepts
Basic kinematic concepts
Vaishnavichakka
 
الأوضاع الاقتصادية في أرقام
الأوضاع الاقتصادية في أرقامالأوضاع الاقتصادية في أرقام
الأوضاع الاقتصادية في أرقام
Ibrahim El Ghitany
 

Destaque (14)

TM 2nd qtr-2ndmeeting(java script-animations)
TM 2nd qtr-2ndmeeting(java script-animations)TM 2nd qtr-2ndmeeting(java script-animations)
TM 2nd qtr-2ndmeeting(java script-animations)
 
4th quarter 18 php & my sql change password page
4th quarter   18 php & my sql change password page4th quarter   18 php & my sql change password page
4th quarter 18 php & my sql change password page
 
مهارات البحث الاقتصادي للصحفيين
مهارات البحث الاقتصادي للصحفيينمهارات البحث الاقتصادي للصحفيين
مهارات البحث الاقتصادي للصحفيين
 
Crif acacias flipped proyecto final
Crif acacias flipped proyecto finalCrif acacias flipped proyecto final
Crif acacias flipped proyecto final
 
1st qtr 3rd meeting-travel
1st qtr   3rd meeting-travel1st qtr   3rd meeting-travel
1st qtr 3rd meeting-travel
 
Tm 1st quarter - 1st meeting
Tm   1st quarter - 1st meetingTm   1st quarter - 1st meeting
Tm 1st quarter - 1st meeting
 
Locations
LocationsLocations
Locations
 
Locations updated
Locations updatedLocations updated
Locations updated
 
Maacc meeting jan 17_13_final
Maacc meeting jan 17_13_finalMaacc meeting jan 17_13_final
Maacc meeting jan 17_13_final
 
1st quarter 3rd meeting(poet)
1st quarter   3rd meeting(poet)1st quarter   3rd meeting(poet)
1st quarter 3rd meeting(poet)
 
TM 2nd qtr-3ndmeeting(java script-functions)
TM 2nd qtr-3ndmeeting(java script-functions)TM 2nd qtr-3ndmeeting(java script-functions)
TM 2nd qtr-3ndmeeting(java script-functions)
 
TM 2nd Quarter - 1st meeting(html backgrounds)
TM 2nd Quarter - 1st meeting(html backgrounds)TM 2nd Quarter - 1st meeting(html backgrounds)
TM 2nd Quarter - 1st meeting(html backgrounds)
 
Basic kinematic concepts
Basic kinematic conceptsBasic kinematic concepts
Basic kinematic concepts
 
الأوضاع الاقتصادية في أرقام
الأوضاع الاقتصادية في أرقامالأوضاع الاقتصادية في أرقام
الأوضاع الاقتصادية في أرقام
 

Semelhante a Tm 1st quarter - 2nd meeting

Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4
Mudasir Syed
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
Shawn Calvert
 

Semelhante a Tm 1st quarter - 2nd meeting (20)

Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4
 
Forms.pptx
Forms.pptxForms.pptx
Forms.pptx
 
Web input forms.pptx
Web input forms.pptxWeb input forms.pptx
Web input forms.pptx
 
Html forms
Html formsHtml forms
Html forms
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
Html class-04
Html class-04Html class-04
Html class-04
 
Notes windows form controls gui applications
Notes windows form controls   gui applicationsNotes windows form controls   gui applications
Notes windows form controls gui applications
 
M02 un11 p01
M02 un11 p01M02 un11 p01
M02 un11 p01
 
Html Tutorial
Html TutorialHtml Tutorial
Html Tutorial
 
Forms with html5
Forms with html5Forms with html5
Forms with html5
 
Forms with html5 (1)
Forms with html5 (1)Forms with html5 (1)
Forms with html5 (1)
 
Creating web form(For College Seminars)
Creating web form(For College Seminars)Creating web form(For College Seminars)
Creating web form(For College Seminars)
 
Html,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tagsHtml,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tags
 
Html Forms.ppt
Html Forms.pptHtml Forms.ppt
Html Forms.ppt
 
INFORMATION TECHNOLOGY (ICT Skills ).pptx
INFORMATION TECHNOLOGY (ICT Skills ).pptxINFORMATION TECHNOLOGY (ICT Skills ).pptx
INFORMATION TECHNOLOGY (ICT Skills ).pptx
 
HTML Form
HTML FormHTML Form
HTML Form
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 

Mais de Esmeraldo Jr Guimbarda

Mais de Esmeraldo Jr Guimbarda (19)

2nd quarter 1st meeting(autofill)
2nd quarter   1st meeting(autofill)2nd quarter   1st meeting(autofill)
2nd quarter 1st meeting(autofill)
 
2ndQuarter2ndMeeting(formatting number)
2ndQuarter2ndMeeting(formatting number)2ndQuarter2ndMeeting(formatting number)
2ndQuarter2ndMeeting(formatting number)
 
Debugging the mastery test
Debugging the mastery testDebugging the mastery test
Debugging the mastery test
 
TM 1st quarter - 4th meeting
TM   1st quarter - 4th meetingTM   1st quarter - 4th meeting
TM 1st quarter - 4th meeting
 
1st quarter 5th meeting- spreadsheet (formula- mdas)
1st quarter   5th meeting- spreadsheet (formula- mdas)1st quarter   5th meeting- spreadsheet (formula- mdas)
1st quarter 5th meeting- spreadsheet (formula- mdas)
 
1st quarter 5th meeting
1st quarter   5th meeting1st quarter   5th meeting
1st quarter 5th meeting
 
1st qtr 4th meeting-travel
1st qtr   4th meeting-travel1st qtr   4th meeting-travel
1st qtr 4th meeting-travel
 
1st qtr 5th meeting-travel
1st qtr   5th meeting-travel1st qtr   5th meeting-travel
1st qtr 5th meeting-travel
 
1st quarter 4th meeting- spreadsheet
1st quarter   4th meeting- spreadsheet1st quarter   4th meeting- spreadsheet
1st quarter 4th meeting- spreadsheet
 
1st quarter 3rd meeting- spreadsheet
1st quarter   3rd meeting- spreadsheet1st quarter   3rd meeting- spreadsheet
1st quarter 3rd meeting- spreadsheet
 
1st quarter 2nd meeting(poet)
1st quarter   2nd meeting(poet)1st quarter   2nd meeting(poet)
1st quarter 2nd meeting(poet)
 
1st quarter 1st meeting(poet)
1st quarter   1st meeting(poet)1st quarter   1st meeting(poet)
1st quarter 1st meeting(poet)
 
1st qtr 2nd metting- travel
1st qtr   2nd metting- travel1st qtr   2nd metting- travel
1st qtr 2nd metting- travel
 
Tm 1st quarter - 3rd meeting
Tm   1st quarter - 3rd meetingTm   1st quarter - 3rd meeting
Tm 1st quarter - 3rd meeting
 
1st quarter 2nd meeting- spreadsheet
1st quarter   2nd meeting- spreadsheet1st quarter   2nd meeting- spreadsheet
1st quarter 2nd meeting- spreadsheet
 
1st quarter 1st meeting- spreadsheet
1st quarter   1st meeting- spreadsheet1st quarter   1st meeting- spreadsheet
1st quarter 1st meeting- spreadsheet
 
1stQtr-1stMeeting-travel
1stQtr-1stMeeting-travel1stQtr-1stMeeting-travel
1stQtr-1stMeeting-travel
 
4th quarter 18 php & my sql change password page
4th quarter   18 php & my sql change password page4th quarter   18 php & my sql change password page
4th quarter 18 php & my sql change password page
 
4th quarter 17 php & my sql registration page
4th quarter   17 php & my sql registration page4th quarter   17 php & my sql registration page
4th quarter 17 php & my sql registration page
 

Último

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 

Último (20)

Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 

Tm 1st quarter - 2nd meeting

  • 1. HTML Input Elements Engr. Esmeraldo T. Guimbarda Jr.
  • 2. Forms An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before su bmitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
  • 3. Input Elements The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.
  • 4. Text Field Text field defines a one-line input field that a user can enter text into. Attributes: size - defines the width of the field. This attribute specifies how many visible characters it can contain. maxlength - defines the maximum length of the field. It specifies how many characters can be entered in the field.
  • 5. name - adds an internal name to the field so that the program that handles forms can identify a specific field. value - defines what will appear in the text field as a default value. align - defines how the field is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP (aligns the top of the text field with the top of the tallest text in the line), BASELINE (aligns the text field with the baseline of the current line), ABSMIDDLE (aligns text field with the middle of the current line) , ABSBOTTOM (aligns the text field with the bottom of the current line).
  • 7. Password Field Password field is the same as a text field. The difference is that what users entered into a password field will be masked or shown as asterisks or circles to prevent others from reading what has been inputted. Attributes: size - defines the width of the field. This attribute specifies how many visible characters it can contain. maxlength - defines the maximum length of the field. It specifies how many characters can be entered in the field.
  • 8. name - adds an internal name to the field so that the program that handles forms can identify a specific field. value - defines what will appear in the password field as a default value. align - defines how the field is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP (aligns the top of the text field with the top of the tallest text in the line), BASELINE (aligns the text field with the baseline of the current line), ABSMIDDLE (aligns text field with the middle of the current line) , ABSBOTTOM (aligns the text field with the bottom of the current line). tabindex - defines in which order the different fields should be activated when the visitor clicks the tab key
  • 10. Radio Button Radio buttons let a user select ONLY ONE of a limited number of choices. Attributes: name - tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group would be unselected. If the group of a specific button is not specified, you could only have one group of radio buttons on each page. value - defines what will be submitted to the server if
  • 11. align - defines how the radio button is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP (aligns the top of the text field with the top of the tallest text in the line), BASELINE (aligns the text field with the baseline of the current line), ABSMIDDLE (aligns text field with the middle of the current line) , ABSBOTTOM (aligns the text field with the bottom of the current line). tabindex - defines in which order the different fields should be activated when the visitor clicks the tab key.
  • 13. Checkboxes Checkboxes let a user select ZERO or MORE options of a limited number of choices. Attributes: name - adds an internal name to the field so that the program that handles the form can identify the fields. value - defines what will be submitted to the server if selected.
  • 14. align - defines how the field is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP (aligns the top of the text field with the top of the tallest text in the line), BASELINE (aligns the text field with the baseline of the current line), ABSMIDDLE (aligns text field with the middle of the current line) , ABSBOTTOM (aligns the text field with the bottom of the current line). tabindex - defines in which order the different fields should be activated when the visitor clicks the tab key.
  • 16. Submit Button A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input. Attributes: name - adds an internal name to the button so the program that handles the form doesn't confuse the button with the other fields. value - defines what is written on the button.
  • 17. align - defines how the field is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP (aligns the top of the text field with the top of the tallest text in the line), BASELINE (aligns the text field with the baseline of the current line), ABSMIDDLE (aligns text field with the middle of the current line) , ABSBOTTOM (aligns the text field with the bottom of the current line). tabindex - defines in which order the different fields should be activated when the visitor clicks the tab key.
  • 19. Drop-down Menu Drop-down menus are probably the most flexible objects you can add to your forms. Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only is allowed) or check boxes (multiple selections are allowed). The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space. But that is also a disadvantage because people can't immediately see all options in the menu.
  • 20. <select> tag Attributes: name - adds an internal name to the field so the program that handles the form can identify the fields. size - defines how many items should be visible at a time. The default is one item. multiple - allows for multiple selections if present. <option> tag Attributes: value - defines what will be submitted if the item is selected.
  • 23. Activity: 1. Create a new file using Notepad++. Open the application Notepad++. Click File then clickNew or press Ctrl+N on your keyboard. Type the structure of an HTML document so that later on, you’ll just have to fill the contents of each part.
  • 24.
  • 25. 2. Save the HTML document that you just made. Click File then Save As or press Ctrl+Alt+S on your keyboard. Choose where you want to save your file by clicking the drop-down field on the topmost part of the pop up window. Change the File name to signupand the Save as Type to Hyper Text Markup Language file. Click Save when done
  • 26.
  • 27. 3. Observe what are the contents of a signup page. Observe the sign up pages of different social networking sites like Facebook or Twitter to know what are the information being asked from the users.
  • 28.
  • 29. 4. Create sign up page. Add a title to the webpage and headings.
  • 30. 5. Finalize what should be included in the form. You’ve noticed from the existing social networking sites that it always ask for the first name, last name, username, password, gender, birthday and if the user agrees to the terms and services of the website. Let’s also ask for the following information from the users plus the department where they belong.
  • 31. Start creating the form. To organize form content, use a two column table. Start with the information that will use text fields. Use text field < input type=”text” >for the first name, last name and username.
  • 32. Note: Insert the code below after “<h3>Sign up here: </h3>”
  • 33. Next are the information that would need the password field < input type=”password” > (password and password confirmation).
  • 34. Radio button will be used to select the user’s gender. Create radio buttons using the syntax < input type=”radio” >
  • 35. To select birthday, drop-down menu will be used. The syntax < select >< option >Option1 for the birth month, day and year will be followed.
  • 36.
  • 37. Or you may also try input type: datetime-local Syntax: <input type="datetime-local">
  • 38. For the terms and conditions of the website, the user must agree that he/she has read and agree to it by marking the checkbox with the syntax < input type=”checkbox” >. Finally, to submit the inputted data to the server, a submit button < input type=”submit” > will be used.
  • 39. Note: Insert the code below after </table>
  • 40. 6. Save the completed HTML document and check the final output. When done putting all required form elements, click File > Save. To check the webpage that you just created, go to the location where you previously saved your file entitled signup.html. Double-click the file and view the webpage. Your page should look something like the image on the right.