Form is
a container, it can hold other controls. It is a paired tag. Syntax -
<form>------</form>
Form Attributes
|
Attributes
|
Parameters
|
|
name
|
Any name
|
|
method
|
get,post
|
|
action
|
url(Uniform
Resource Locator)
|
Form Tags
|
Tag
|
Description
|
|
<form>
|
Defines
a form for user input.
|
|
<input>
|
Defines
an input field.
|
|
<button>
|
Defines
a push button.
|
|
<textarea>
|
Defines
a text area.
|
|
<label>
|
Defines
a label to the description.
|
|
<fieldset>
|
Defines
a border to the input data.
|
|
<legend>
|
Defines
a caption name write into fieldset.
|
|
<select>
|
Defines
a drop down select list box.
|
|
<option>
|
Defines
an option value in the drop down box.
|
Types of Form Fields
·
|
Field Name
|
Keyword
|
Syntax
|
|
Text box
|
text
|
<input
type=”text”>
|
|
Password
box
|
password
|
<input
type=”password”>
|
|
Check
box
|
checkbox
|
<input
type=”checkbox”>
|
|
Radio
button
|
radio
|
<input
type=”radio”>
|
|
Submit
button
|
submit
|
<input
type=”submit”
|
|
Reset
button
|
reset
|
<input
type=”reset”>
|
|
Textarea
|
textarea
|
<textarea>
</textarea>
|
Example –
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form>
<label>UserName : </label><br/>
<input type="text"><br/>
<label>Passeord : </label><br/>
<input type="password"><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
Input Field Attributes
|
Attributes
|
Parameters
|
|
name
|
Any name.
|
|
value
|
Any
value.
|
|
size
|
pixels.
|
|
maxlength
|
number.
|
|
rows
|
number.
|
|
cols
|
number.
|
|
readonly
|
true, false
|
|
disabled
|
disabled
|
|
checked
|
checked
|
|
multiple
|
true,
false
|
Example –
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form>
<label>UserName : </label><br/>
<input type="text" name="uname"
value="Enter name" size="6px" maxlength=6 readonly="true"><br/>
<label>Passeord : </label><br/>
<input type="password" name="pwd"
value="Enter password"><br/>
<input type="submit" value="SignIn"
name="sn" disabled="disabled">
</form>
</body>
</html>
Textarea –
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form>
<textarea rows="5" cols="24"
name="tarea" id="tar1">
Hello
Alien
</textarea>
</form>
</body>
</html>
Combo-box –
Single selection possible.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form>
<select>
<option>Select any
item</option>
<option>HTML5</option>
<option>CSS</option>
</select>
</form>
</body>
</html>
List-box
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form>
<select multiple="multiple">
<option>Select any
item</option>
<option>HTML5</option>
<option>CSS</option>
</select>
</form>
</body>
</html>
Radio
button
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<p>Which is your
favourite browser</p>
<form>
<input type="radio" name="browser"
value="Chrome">Chrome
<input type="radio" name="browser"
value="Firefox">Firefox
</form>
</body>
</html>
Checkbox
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<p>Which is your
favourite browser</p>
<form>
<input type="checkbox" name="browser">Chrome
<input type="checkbox" name="browser">Firefox
</form>
</body>
</html>
Fieldset –
It defines a group of form elements as being
logically related. The browser draws a box around the set of fieldset to
indicate that they are related. It is a paired tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<p>Which is your
favourite browser</p>
<form>
<fieldset>
<input type="checkbox" name="browser">Chrome
<input type="checkbox" name="browser">Firefox
</fieldset>
</form>
</body>
</html>
Legend – It is used with fieldset to give a title to
each set of fields. It is a paired tag. Its attribute is align with parameter as left,
right, center.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form>
<fieldset>
<legend>Which is your
favourite browser</legend>
<input type="checkbox" name="browser">Chrome
<input type="checkbox" name="browser">Firefox
</fieldset>
</form>
</body>
</html>
No comments:
Post a Comment