HTML Input ElementsEngr. 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 ButtonRadio 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 selected.

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:

CheckboxesCheckboxes 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 ButtonA 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.