The document discusses various HTML input elements used for forms, including text fields, password fields, radio buttons, checkboxes, drop-down menus, and submit buttons. It describes the purpose and common attributes of each element. The activity at the end provides instructions for creating a sign up form using these input elements to collect a user's name, username, password, gender, birthday, department, and agreement to terms and conditions.

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).

6. Syntax:
Example:
Output:

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

9. Syntax:
Example:
Output:

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.

12. Syntax:
Example:
Output:

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.

15. Syntax:
Example:
Output:

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.

18. Syntax:
Example:
Output:

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.

21. Syntax:

22. Example:
Output:

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.

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

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.

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.

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.