CREATING A FORM
Forms are the parts of the page that allow user interaction and it's represented with the <form></form> tag.You can create forms with HTML, but to make them do something,you need a programming language like javascript or php.Below is the code to create a form:
Type the following code in your text editor.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Building Form </title>
</head>
<body>
<h2>Building Form </h2>
<form action = "">
<label>Name</label>
<input type="text" value="name" id="firstname" />
<label>e-mail</label>
<input type="text" value="email" id="email" />
<label>Nationality</label>
<input type="text" value="country" id="country" />
<input type="button" value="submit" id="buttom" />
</form>
<h3> End of unordered list. </h3>
</body>
</html>
How it works
1.The <form> and </form> tags: These define the form as a part of the page.The action attribute indicates what should happen when the form is submitted,this requires a programming language like php or javascript.2.The <label> tag: This tag allows you to specify a particular chunk of text as a label.
3.The <input> elements: This can create single-line text boxes, password boxes, buttons, and even invisible content (such as hidden fields).The code above is an example of single-line text box.
Working With Input Types
Building a text field
Text : <input type = "text" id = "textName" value = "John"/>Note:There is no </input> tag.You just end the original tag with a slash character ( / ), as shown in the preceding sample code.
How it works
1.Type : The type attribute indicates the type of input element this is.This example sets type to text , creating a standard text box.2.Id : The id attribute creates an identifier for the field.You would understand this better when you get to css.
3.Value : This attribute determines the default value of the text box. leaving this out will make the text field begin empty.
4.Maxlength : Determines length of characters allowed.
5.Size : This attribute determines the number of characters that are displayed.
Building a password field
Password : <input type = "password" id = "pwd" value = "secret" />*Note* : The difference between text field and password field is that password field are not visible,Instead, a series of asterisks appears.
Building Multiple Selection Elements
You can create a list of choice and then have the user pick one element from the list.
*Add this code to your form tag:
<select id = "selColor">
<option >Yellow</option>
<option >Black</option>
<option >White</option>
</select>
How it works
1.<select></select>. These tags indicate the entire list.2.<option></option>. Thses tags holds the choice list you create.