Registration form design

1. 1By ShreyaChougule

2. The <form> Element
The HTML <form> element defines a form that is used to
collect user input
An HTML form contains different form elements.
Form elements are types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
Syntax of form is given by:-
<form>
.
form elements(different input elements)
.
</form>
2By ShreyaChougule

3. Use of The <input> Element
The <input> element is one of the most important form element.
The <input> element can be displayed in several ways, depending on
the type attribute.
Some of the types of input elements are as follows:-
Type Description
<input type=“text”> Gives one line text input
<input type=“radio”> Used for selecting one of the many
choices
<input type=“submit”> Used for submitting form
3By ShreyaChougule

4. Action Attribute
The action attribute defines the action to be
performed when the form is submitted.
Normally, the form data is sent to a web page on the
server when the user clicks on the submit button.
If the action attribute is omitted, the action is set to
the current page
4By ShreyaChougule

5. Target Attribute
The target attribute specifies if the submitted result
will open in a new browser tab, or in the current
window.
The default value is "_self" which means the form
will be submitted in the current window.
To make the form result open in a new browser tab,
use the value "_blank":
<form action="/action_page.php" target="_blank">
5By ShreyaChougule

6. Method Attribute
The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the form
data.
Get is used to request data from specified resource.
Post is used to send data to server to create or update
resource.
Get method:-It gives content of form in web address
<form action="/action_page.php" method="get">
Post method:-It does not give any content.
<form action="/action_page.php" method=“post">
6By ShreyaChougule

7. Use of get method
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will
be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
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
7By ShreyaChougule

8. Use of Post Method
Always use POST if the form data contains sensitive
or personal information. The POST method does not
display the submitted form data in the page address
field.
POST has no size limitations, and can be used to send
large amounts of data.
8By ShreyaChougule

9. Name Attribute
Each input field must have a name attribute to be
submitted.
If the name attribute is omitted, the data of that
input field will not be sent at all.
If we use get method then the omitted name will not
be visible at web address bar.
Syntax:-
<input type="text" name="lastname" value="Mouse">
OUTPUT
9By ShreyaChougule

10. Grouping Form data
Generally in order to group certain set of data in the
form <fieldset> tag is used.
The <legend> element defines a caption for
the <fieldset> element.
Syntax:-<form action=“”>
<fieldset>
<legend>Heading you want to display</legend>
<label for=“”>
<input type….>
</fieldset>
</form>
10By ShreyaChougule

11. HTML Form Elements
1) Input Element
2) Select Element:- The <select> element defines a drop-down
list.
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the
option:
<option value=“xyz" selected>Name of Selected value</option>
Syntax of select element:-
<select name=“abc">
<option value=“one">One</option>
<option value=“two">Two</option>
<option value=“….">…..</option>
<option value=“….">….</option>
</select>
11By ShreyaChougule

12. HTML Form Elements
2.Select Element:-
 Use the size attribute to specify the number of
visible values:
<select name="cars" size="3">
Here three values of car will be visible
 It allows multiple option selection.
 <select name="cars" size="4" multiple>
 Use ctrl to select multiple options at a time.
3. TextArea Element:-
The <textarea> element defines a multi-line input
field (a text area): 12By ShreyaChougule

13. HTML Form Elements
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines
in a text area.
The cols attribute specifies the visible width of a text
area.
4. Button Element:- This element defines clickable
button.
Syntax:-
<button type="button" onclick="alert('Hello
World!')">Click Me!</button>
13By ShreyaChougule

14. HTML Input Types
1. Input type Text:- <input type="text"> defines a one-
line text input field.
Syntax:- <form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
2. Input type Password:- <input type=“password”> it
gives password in asterisk mark or black dots.
Syntax:- <input type="password" name="psw">
3. Input type Submit:- <input type="submit"> defines a
button for submitting form data to a form-handler. 14By ShreyaChougule

15. HTML Input Types
The form-handler is typically a server page with a
script for processing input data.
The form-handler is specified in the
form's action attribute:
Syntax:- <input type="submit" value="Submit">
4. Input type Reset:- <input type="reset"> defines
a reset button that will reset all form values to
their default values.
Syntax:- <input type=“reset" value=“reset">
If you change the input values and then click the
"Reset" button, the form-data will be reset to the
default values.
15By ShreyaChougule

16. HTML Input Types
5. Input type radio:- <input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of
choices
e.g.:-
<form>
<input type="radio" name="gender" value="male" checked> M
ale<br>
<input type="radio" name="gender" value="female"> Female<
br>
<input type="radio" name="gender" value="other"> Other
</form>
6. Input type Checkbox:- <input type="checkbox"> defines
a checkbox.
Checkboxes allows a user select ZERO or MORE options of a
limited number of choices. 16By ShreyaChougule

17. HTML Input Types
e.g. :- <form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a
bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a
car
</form>
7. Input type Button:-<input type="button"> defines a button
E.g.:- <input type="button" onclick="alert('Hello
World!')" value="Click Me!">
17By ShreyaChougule

18. HTML Input Attributes
1. Value Attribute:- The value attribute specifies the initial value
for an input field.
2. Readonly Attribute:- The readonly attribute specifies that the
input field is read only (cannot be changed)
3. Disabled Attribute:- The disabled attribute specifies that the
input field is disabled. A disabled input field is unusable and
un-clickable, and its value will not be sent when submitting
the form
4. The size attribute specifies the size (in characters) for the
input field
<form> First name:<br>
<input type="text" name="firstname" value="John" readonly
disabled size=“40”>
</form>
18By ShreyaChougule

19. Label tag in form tag
It is considered better to have label in form. As it makes the
code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To
do so, you need to have for attribute in label tag that must be
same as id attribute of input tag.
<form>
<label for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname"/> <b
r/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br
/>
</form>
19
By ShreyaChougule

20. HTML5 Input types
Input Type Color:The <input type="color"> is used for input fields
that should contain a color.
Depending on browser support, a color picker can show up in the
input field.
Input Type Date
The <input type="date"> is used for input fields that should
contain a date.
e.g.:-<form>
Select your favorite color:
<input type="color" name="favcolor">
<input type="date" name="bday">
</form>
. 20
By ShreyaChougule

21. HTML5 Input types
Input Type Email:-The <input type="email"> is used for input
fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be
automatically validated when submitted.
Some smartphones recognize the email type, and adds ".com" to
the keyboard to match email input.
<input type="email" name="email">
Input Type File:-The <input type="file"> defines a file-select
field and a "Browse" button for file uploads.
Select a file: <input type="file" name="myFile">
Input Type Number:-The <input type="number"> defines
a numeric input field.
You can also set restrictions on what numbers are accepted.
.
21
By ShreyaChougule

22. HTML5 Input types
The following example displays a numeric input field, where you can
enter a value from 1 to 5:
<input type="number" name="quantity" min="1" max="5">
Input Type Range:-The <input type="range"> defines a control
for entering a number whose exact value is not important (like a
slider control). Default range is 0 to 100. However, you can set
restrictions on what numbers are accepted with the min, max,
and step attributes:
 <input type="range" name="points" min="0" max="10">
Input Type Search:-The <input type="search"> is used for search
fields (a search field behaves like a regular text field).
 Google:<input type="search" name="googlesearch">
22
By ShreyaChougule

23. HTML5 Input types
Input Type Url:-The <input type="url"> is used for input fields
that should contain a URL address.
Depending on browser support, the url field can be
automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to
the
Add your homepage:
<input type="url" name="homepage">keyboard to match url
input.
23
By ShreyaChougule

24. HTML5 Attributes
HTML5 added the following attributes for <input>:form
The height and width Attributes:The height and width attributes
specify the height and width of an <input type="image"> element.
Always specify the size of images. If the browser does not know
the size, the page will flicker while images load.
<input type="image" src="img_submit.gif" alt="Submit" width="48
" height="48">
The list Attribute:-The list attribute refers to
a <datalist> element that contains pre-defined options for an
<input> element.
<input list="browsers"><datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
24
By ShreyaChougule

25. HTML5 Attributes
The min and max Attributes:-The min and max attributes specify
the minimum and maximum values for an <input> element.
The min and max attributes work with the following input types:
number, range, date, datetime-local, month, time and week.
 Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
The multiple Attribute:-The multiple attribute specifies that the
user is allowed to enter more than one value in
the <input>element.
The multiple attribute works with the following input types:
email, and file.
 Select Files: <input type="file" name="img" multiple>
25
By ShreyaChougule

26. HTML5 Attributes
The placeholder Attribute:-The placeholder attribute specifies a
hint that describes the expected value of an input field (a sample
value or a short description of the format).
The hint is displayed in the input field before the user enters a
value.
The placeholder attribute works with the following input types:
text, search, url, tel, email, and password.
The required attribute:- specifies that an input field must be
filled out before submitting the form.
The required attribute works with the following input types:
text, search, url, tel, email, password, date pickers, number,
checkbox, radio, and file.
e.g. <input type="text" name="fname" placeholder="First name“
required>
26
By ShreyaChougule

27. HTML5 Attributes
27
By ShreyaChougule