Scribd
Upload
25 views

Css Practical No 6

css pr

Uploaded by

masterhackeryt3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

Css Practical No 6

css pr

Uploaded by

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

Practical No-6.

Create web page using Form Elements

What are forms?


<form> is just another kind of XHTML/HTML tag. Forms are used to create (rather primitive) GUIs on
Web pages. Usually the purpose is to ask the user for information. The information is then sent back to
the server. A form is an area that can contain form elements
The syntax is:
<formparameters>...form elements...</form>
Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc.
The arguments to form tell what to do with the user input

action="url" (required) :-Specifies where to send the data when the Submit button is clicked
method="get" (default):-Form data is sent as a URL with ?form_data info appended to the endCan be
used only if data is all ASCII and not more than 100 characters
method="post" :-Form data is sent in the body of the URL request. Cannot be bookmarked by most
browsers
target="target" :-Tells where to open the page sent as a result of the request.target= _blank means
open in a new window. target= _top means use the same window
The <input> tag
Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of
element it istype can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image
Other common input tag arguments include:
name: the name of the element
id: a unique identifier for the element
value: the “value” of the element; used in different ways for different values of type
readonly: the value cannot be changed
disabled: the user can’t do anything with this element
Other arguments are defined for the input tag but have meaning only for certain values of type
Text input
A text field:
<input type="text" name="textfield" value="with an initial value" />

A multi-line text field


<textarea name="textarea" cols="24" rows="2">Hello</textarea>

A password field:
<input type="password" name="textfield3" value="secret" />

Buttons
A submit button:send data
<input type="submit" name="Submit" value="Submit" />
A reset button:restore all form elements to their initial state
<input type="reset" name="Submit2" value="Reset" />
A plain button:take some action as specified by JavaScript
<input type="button" name="Submit3" value="Push Me" />

Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1" />male<br>
<input type="radio" name="radiobutton" value="myValue2” checked="checked" />female
If two or more radio buttons have the same name, the user can only select one of them at a time. This is
how you make a radio button “group”.
If you ask for the value of that name, you will get the value specified for the selected radio buttonas
with checkboxes, radio buttons do not contain any text.

Labels
A label tag will bind the text to the control
<label><input type="radio" name="gender" value="m" />male</label>

Checkboxes
A checkbox: <input type="checkbox" name="checkbox" value="checkbox" checked="checked">
type: "checkbox"
name: used to reference this form element from JavaScript
value: value to be returned when element is checked

Drop-down menu or list


A menu or list:<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

Additional arguments:
size: the number of items visible in the list (default is "1")
multiple

if set to "true" (or just about anything else), any number of items may be selected
if omitted, only one item may be selected
if set to "false", behavior depends on the particular browser

Additional input types:-


<input type="color">
<input type="date">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="range">
<input type="search">
<input type="time">
<input type="url">
<input type="week">

Example
<html><body>
<form action="">
User name:<br>
<input type="text" name="userid"><br>
User password:<br>
<input type="password" name="psw"><br>
<input type="submit" value="Submit"><br>
<input type="reset"><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other">Other<br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car <br>
</form>
</body></html>
Create a webpage using Form Elements:
<html>
<div class="container">
<form >
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."><br>
<label for="country">Country</label>
<select id="country"name="country">
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select><br>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea><br>
<input type="submit" value="Submit">
</form>
</div>
</html>

You might also like