Creating HTML forms

Using KompoZer

Chapter - 1
 Forms in HTML
 Form is a container used to collect different
kinds of input from user
 Elements like label, text box, check box, radio
button, submit and reset buttons, drop down
lists, file upload option are used
 Form Elements
 <form> </form>
 Attributes :
 Name – name of form
 Action – used to specify where to send the form data
when the form is submitted, can be a file name
 Method – specifies the HTTP method used when
sending the data, can be 'post' or 'get', default is GET
 POST – data is sent as a block through HTTP
transaction, no restriction on data length
 GET – retrieves data from form and sends to the
server by attaching it at the end of the URL, limited
info can be attached
 Input Elements – Text box
 <input> </input>
 Attributes:
 Type – type of input, default is text
 Name – unique identification of text box
 Value – default value displayed in text box
 Maxlength – maximum no of characters that can
be entered
 Size – length of text box, default is 15
<input type=text name=n1 value= “Sumeet” size=30>
 Input Elements – Password
 <input> </input>
 Attributes:
 Type – type of input, type=password
 Name – unique identification of password text box
 Value – default value displayed, not recommended
 Maxlength – maximum no of characters that can
be entered
 Size – length of text box, default is 15
<input type=password name=p1 size=30>
 Input Elements – Radio
 <input> </input>
 Attributes:
 Type – type of input, type=radio
 Name – unique identification of radio button, for
creating a group, all radio buttons should be given
same name- only one from the group can be
selected
 Value – default value stored
 Checked – if radio button has to be selected when
the form loads
<input type=radio name=gender value='male'> Male
 Input Elements – Check box
 <input> </input>
 Attributes:
 Type – type of input, type=checkbox
 Name – unique identification of checkbox, for
creating a group, all checkboxes should be given
same name – multiple selection possible
 Value – default value stored
 Checked – if checkbox has to be selected when the
form loads
<input type=checkbox name=hobby value= 'singing‘ >
Singing
 Input Elements – File
 <input> </input>
 Attributes:
 Type – type of input, type=file
 Name – unique identification of file upload
 Value – default value stored
<input type=file name=upload>
 Input Elements – Submit
 Values of data entered in the form is submitted
to the file specified in the action attribute of
form element
<input> </input>
 Attributes:
 Type – type of input, type=submit
 Name – unique identification of button, not
required
 Value – default value displayed
<input type=submit value= “Send”>
 Input Elements – Reset
 Values of the data entered in the form are
cleared and set back to default values
<input> </input>
 Attributes:
 Type – type of input, type=reset
 Name – unique identification of button, not
required
 Value – default value displayed
<input type=reset value= “Clear”>
 Textarea
 Allows multi-line text input
<textarea> </textarea>
 Attributes:
 Name – unique identification of control
 Rows – no of rows displayed
 Cols – no of columns displayed (characters)
 Value – default value displayed
<textarea name=address rows=3 cols=30>
</textarea>
 Select and Option
 Allows creating drop down or menu in form
<select>
<option> </option>
</select>
 Attributes of Select:
 Name – unique identification of control
 Size – no of options to be displayed
 Multiple – if multiple selection needs to be enabled
 Attributes of Option
 Value – default value to be stored
 Selected – default selection
<select name=city>
<option value='Ahmedabad'>Ahmedabad</option>
<option value='Baroda' selected>Baroda</option>
</select>
 Creating Table
<table> <table>
<tr> <tr>
<th>Group1 <th colspan=2>2015-16
<th>Group2 <tr>
<tr> <td>Academics
<td>Yellow <td>Activities
<td>Orange </table>
</table>
Group1 Group2 2015-16
Yellow Orange Academics Activities
Hands on Practice
 IDE- Integrated Development
Environment
 IDE is a software application that provides
complete facilities to programmer to develop
software
 Provides a GUI (graphical user interface), text
or code editor, a compiler and/or interpreter
and a debugger
 KompoZer, Eclipse, JBuilder and Netbeans are
open source IDEs
 Menu bar
Composition bar
Format Toolbar1
Format Toolbar2

Page Tab

Rulers

Site Manager

Page Area

Status bar
DEMO