Scribd
Upload
14 views22 pages

pdf and assignemnt\6th day form

Html, css project

Uploaded by

umairahmed342.mu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views22 pages

pdf and assignemnt\6th day form

Html, css project

Uploaded by

umairahmed342.mu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Welcome to

CNCWEBWORLD

Topic:Form

Trainer –
Shilpa Nikhare
FORM
 The HTML <form> tag is used to create a form
on a web page that has interactive controls for
user input. This tag is also commonly referred to
as the <form> element.
 Forms are required when you want to collect
some data from the site visitor. For example
registration information: name, email address,
credit card, etc.
 A form will take input from the site visitor and
then will post your back-end application
FORM
 Form elements are like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.
which are used to take information from the user
 Syntax:

<form action="back-end script" method="posting


method">
form elements like input, textarea etc.
</form>
FORM
 name: This is the name of the form.
 action: Here you will specify any script URL which will
receive uploaded data.
 method: are GET and POST.

 enctype: You can use the enctype attribute to specify how


the browser encodes the data before it sends it to the
server.
1.application/x-www-form-urlencoded - This is the standard
method most forms use. It converts spaces to the plus sign
and non-alphanumeric characters into the hexadecimal code
for that character in ASCII text.
2.mutlipart/form-data - This allows the data to be sent in
parts, with each consecutive part corresponding the a form
control, in the order they appear in the form. Each part can
have an optional content-type header of its own indicating the
type of data for that form control.
FORM
 controls
 only one line of user input, such as search boxes
or names. They are created using the <input>
element.
 type: Indicates the type of input control you want
to create. This element is also used to create
other form controls such as radio buttons and
checkboxes.
o Text Input
 name: Used to give the name part of the
name/value pair that is sent to the server,
representing each form control and the value the
user entered
FORM
 value: Provides an initial value for the text input
control that the user will see when the form
loads.
 size: Allows you to specify the width of the text-
input control in terms of characters.
 maxlength: Allows you to specify the maximum
number of characters a user can enter into the
text box.
 Eg:

<input type="text" name="firstname" value=“”/>


FORM
Password :single-line password input used to
take user password.
Eg:<input type="password" name="password" />

o Button Type:
 When you use the <input> element to create a
button, the type of button you create is specified
using the type attribute. The type attribute can
take the following values:
1.Submit
2.Reset
3.Button
FORM
 Submit: This creates a button that automatically
submits a form.
<input type=“submit" value="Hello world!">
o Reset: This creates a button that automatically resets
form controls to their initial values.
<input type=“reset" value="Hello world!">
 Button: This creates a button that is used to trigger a
client-side script when the user clicks that button
<input type=“button” value="Hello world!">
o Button Elements

<button type="submit“name="submit">Submit</button>
FORM
Method
The method attribute specifies how to send form-data,
 GET:
 Appends form-data into the URL in name/value pairs
 The length of a URL is limited (about 3000 characters)
 Never use GET to send sensitive data! (will be visible in the
URL)
 GET is better for non-secure data, like query strings in
Google.
 POST:
 Appends form-data inside the body of the HTTP
request (data is not shown is in URL)
 Has no size limitations
FORM
 Radio Buttons are used when only one option is
required to be selected.
 type: Indicates that you want to create a radio box
 name: Name of the control.
 value: Used to indicate the value that will be sent to
the server if this option is selected.
 checked: Indicates that this option should be selected
by default when the page loads.

<input type="radio" name="gender" value="male" />


Male
FORM
 CheckBox
Checkboxes are used when more than one option is
required to be selected.
 type: Indicates that you want to create a checkbox.

 name: Name of the control.

 value: The value that will be used if the checkbox is


selected. More than one checkbox should share the
same name only if you want to allow users to select
several items from the same list.
 checked: Indicates that when the page loads, the
checkbox should be selected.
<input type="checkbox" name="vehicle"
value="Bike" />
FORM
 Drop Down Box is used when we have many options
available to be selected but only one or two will be
selected..
 name: This is the name for the control.
 size: This can be used to present a scrolling list box.
 multiple: If set to "multiple" then allows a user to
select multiple items from the menu.
 Following is the list of important attributes of
<option>:
 value: The value that is sent to the server if this option
is selected.
 selected: Specifies that this option should be the
initially selected value when the page loads.
 label: An alternative way of labeling options
FORM
 Multiple-Line Text Input Controls
create a multiple-line text input control using the
<textarea> element.
 name: The name of the control. This is used in the
name/value pair that is sent to the server.
 rows: Indicates the number of rows of text area box.

 cols: Indicates the number of columns of text area box.

 Disabled: This Boolean attribute indicates that the


user cannot interact with the control.
<textarea name="myTextArea"cols="20"
rows="10"></textarea>
FORM
 File Upload Box
If you want to allow a user to upload a file to your web
site from his computer, you will need to use a file upload
box, also known as a file select box.

<input type="file" name="file">


FORM
 Legend & Field set
The <legend>tag defines a caption for
the <fieldset> element.The<fieldset> tag is used to group
related elements in a form.

 Syntax
<fieldset>
<legend>Personal Information:</legend>
</fieldset>
FORM
 Hidden Form Controls
Hidden form controls are used to hide data inside the
page which later on can be pushed to the server.

 Syntax
<input type="hidden" name="fname" >
ASSIGNMNET
Example :1
ASSIGNMENT
Example :2
ASSIGNMENT
Example :3
ASSIGNMENT
Example :4
ASSIGNMENT
Example :4

You might also like