It online Exam

Friday 7 July 2017

Lesson No. 1 Web Publishing - Forms

Chapter No. 1 Web Publishing

FORMS

Forms are used to accept or input the data from user. The form consists of objects called form elements or form controls.
E.g. Text box, Password box, Radio button, List box, Command button, submit button, Drop list box, Check box, etc.

To create forms,  <form> tag is used. All the elements are placed within <form>    </form> tags.

<input> tag: Used to create the form fields or controls by using type attribute.


Textbox or Text input field
Used to input text in a single line.
E.g. <input   type=text   name="fname">
Password field
Used to type password (displays * or . )
E.g.   <input  type=password     name="pwd">
Submit button
Creates submit button, used to send form data to server for processing.
E.g.   <input type=submit value="submit">
Example - Simple LOGIN form
<html>
 <head>
<title>Login Form</title>
</head>
<body>
    <h1> User Login</h1>
    User ID: <input  type=text  name="loginid"  size=15>
    <br><br>
    Password: <input  type=password  name="pwd">
    <br><br>
    <input type=submit value="login">
</body>
</html>
Radio button
It's a toggle button and only one option can be selected from a group of radio buttons.
E.g. <input  type=radio  name=gender value="M">
<input  type=radio  name=gender value="F">
Check box
Used to select one or more options from number of choices
E.g. <input   type=checkbox   name=hobby  value="Cri">
<input  type=checkbox   name=hobby  value="Bas">
Button field
It is used to display a command button to which we can assign a function (task).
Clicking the button will activate a function.
 E.g.  <input type=button name=button1 onclick="function();">
Attributes of <input> tag:
Name  - assigns a name to form field.
Size - specifies the display size of a text box
Maxlength - limits the number of character that a user can enter in a text field.
Value  - It is used to assign a default value to text box.
Type - It indicates the type of form objects like text (default),  radio, submit, reset, checkbox, etc.
Checked - It is used to specify default selection for radio button and check box.
id - used to provide a id to the field (used in CSS)

Select list box  or Drop down list box
The <select> tag is used to select an option from menu kind of drop-down list or scrolling list box.
E.g.
<select  name=city>
<option value=mum>Mumbai</option>
<option value=thn>Thane</option>
<option value=kyn>Kalyan</option>
</select>
Attributes of <select>:
Name - It is used to specify a name to the select box. Assigns a label to selection.
Size - Specifies the number of list items to be displayed at one time.
Multiple - Allows the user to select multiple options.
  
<textarea> tag
It is used to create multiline textbox or large editable area.
E.g.
<textarea rows=3 cols=40>
  
</textarea>
Attributes of <textarea> tag:
Name  - assigns a name to the text area
Rows - specifies the height of the text area in  number of lines.
Cols  - specifies the width of the text area in no. of columns /characters.
Hidden field
The purpose of the hidden field is to store the value that need to be sent to server along with form. The browser does not display these values.
E.g.  <input type=hidden name=xyz  value=256>
Attributes of <form> tag:
Method   -   It specifies the method of sending form data to the server.
There are two methods:
GET - It appends the data to the URL in name/value pairs.
POST - sends the form data hidden in HTTP headers not visible on the screen.
Action - It specifies the location/path or URL of the server where the form data is to be submitted.
Name - assigns a name to the form.
E.g.
<form  method=post  name=form1 action="http://www.exza.in/getdata.php">

No comments:

Post a Comment