Page 39 - Computing Book 7

Building a Website – Adobe Dreamweaver Class 7

• From the Insert option, click on Forms Tab and insert the form to let the HTML knows that this
is the form area. After clicking on this button, a red dashed line will appear to represent that this
is the form area, from this point onward we will be working inside the <form> tag.
• Create a table of 10 rows and 2 columns while setting its cell spacing to 4, border and padding to
0. Using a table to manage the forms elements is highly recommended for place management.
Recommended width 500px.
• On the left column, we will enter the title of information required such as name, address etc.
whereas on the right side we will enter the form elements.
• The first element we will insert is a text field. Click on this button and another will appear
with numerous information required:
o ID: information is used to program the form text field with
programming languages like PHP, JavaScript etc.
o Label: information is used to place the title along with form
element, but in this case, we are already using the table,
therefore, no need to fill in the label information and also
select the option of “No Label tag”.
o The access key is used to assign a specific hotkey to directly
shift the cursor focus by pressing Alt+“Access Key”.
o Tab Index is the sequence of cursor focus, if we enter 3 over here then the cursor will focus
this specific text field on the third press of the TAB key.
• Insert two text fields, the first one for name and the second one for a contact number.
• The next form element we will enter is List/Menu to create a drop-down list for selecting an
option from a list given. HTML tag for form list is <select> </select>.
• The number of list item can be inserted from List Values… button on the bottom from the
properties panel, click on the List Values… button and another window will appear, click on the +
icon to add the list menu items.
• The next form element is Radio buttons, the function of a radio button is to get one single
answer from the multiple choices given.
• The next form element is checkboxes, the function of checkboxes is to get multiple answers
from the multiple choices given.
• The next form element is the Text area. Text area works like a simple text field but it can
accommodate more words than a normal text field and its layout is like a paragraph.
• Buttons are the action element of form to submit or reset the form.

The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 38 of 95