Css Practical No 6
Css Practical No 6
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 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
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
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>