Basic HTML Form Components

HTML form elements are used to insert the form in the document. It is a method that allow author to collect information of users or visitors. The visitors only should fill up the form and then send by simply clicking submit button.

syntax: 
<form></form>
Attributes of form tag are:-

• name=" ";
• method=" "; // It can be simply post or get.
• action=" ";// It is destination of data that is to be sent.
• enctype=" ";// multiport/form-data .It is used for file like image, video etc 

eg:

<form action="test.php">

<fieldset>

<legend>My Information</legend>

Name: <input type="text" name="name" />

Address: <input type="text" name="address" />

Email: <input type="email" name="email" />

Phone: <input type="text" name="phone" />

 <input type="submit" value="Submit">

</fieldset>

</form>

Form Components

Textbox: This component is always used in form element. It is used to fill the form like Name or that box which only contains words.
Syntax:

<input type="text"/>

Attributes:

value=" "// default character on load

name=" "// unique identification in form

size=" "//width in no. of characters

maxlength=" "//maximum no. of characters allowed

placeholder=" "

eg:

<input type="text" value="name" name="n1" size="10" maxlength="20"/>

Passwordbox: Only used to fill the password box.

Syntax:

<input type=""password/>

Attributes: The attributes are same like the textbox such as name, size, maxlength and also placeholder.

Text Area: It is used to fill the box by long description.

Lets see the syntax. It syntax is little bit different than other form components. 

<text area></textarea> // Unlike the input tag, it is pair tag.

Its attributes are also very similar to textbox like name but it also has rows and cols.

eg:

<textarea name="area" rows="50" cols="20">.....</textarea>

Radio button: Radio button is used to select one element at a time. Lets see and example then you will know better about it.

eg:

<input type="radio" name="gender" value="male"/>Male

<input type="radio" name="gender" value="female"/>Female

Checkbox: It is used to select multiple values.

eg:

<input type="checkbox" name="abc[name of array for large data]"/>Football

<input type="checkbox" name="abc[name of array for large data]"/>Cricket

Select box: Just use the following code and then you can find how it works. Actually it is used to select an option form multiple data of dropdown box.

eg:

<select name=" "/>

<option value="Nepal" selected="selected">Nepal</option>

<option value="India">India</option>

<option value="China">China</option>

<option value="USA">USA</option>

File field: File field is used actually in order to have the image.

eg:

<input type="file" name="picture" multiple/>

Posted by Admin Blog

Tweet