PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture19 : Forms

HTML Forms

  • HTML Forms are very powerful because they can collect data from the Internet and use that information in other web pages. An HTML form contain control like text field, checkboxes, radio-buttons, submit buttons and span more.
  • The HTML <form> element represents a document section that contains interactive controls to submit information to a web server.

Example :
<!DOCTYPE html>
<html>
<body>

<form action="Form.asp">
First Name: <input type="text" name="FirstName" value="Andy"><br>
Last Name: <input type="text" name="LastName" value="Flower"><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

HTML Forms - For <input> Element

  • The <input> element are most important and widely used element in HTML forms . The <input> element is used to collect or select user information from Infromation Forms.
  • An <input> element contain many type of control like text field, checkbox, password, radio button, submit button and more.

Example :
<!DOCTYPE html>
<html>
<body>

<form action="Form.asp">
<input type="text" name="FirstName" value="Andy"><br>
<input type="text" name="LastName" value="Flower"><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

Text Fields

  • Text Field is define the text information about user.

Example :
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output :
Name :

Password Fields

  • Password Field is define the text(Password) information about user.

Example :
<!DOCTYPE html>
<html>
<body>

<form>
Password : <input type="password" name="pass">
</form>

</body>
</html>

Output :
Password :

Radio Buttons

  • Radio Button is used to define one information select at a time such as Male or Female.

Example :
<!DOCTYPE html>
<html>
<body>

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

</body>
</html>

Output :
Male
Female

Checkboxes

  • Checkboxes is used to define one information choose at a time such as Telvision or Eashing Machine.

Example :
<!DOCTYPE html>
<html>
<body>

<form>
<input type="checkbox" name="Electronic" value="Television">I have a Television<br>
<input type="checkbox" name="Electronic" value="Washing Machine" >I have a Washing Machine
</form>

</body>
</html>

Output :
I have a Television
I have a Washing Machine

Submit Button

  • Submit Button is used to send the user information(data) on the server.

Example :
<!DOCTYPE html>
<html>
<body>

<form name="user" action="form.asp" method="get">
User Name : <input type="text" name="user">
<input type="submit" value="Submit">
</form>

</body>
</html>

Output :
User Name :

HTML Forms - <textarea> Tag

  • <textarea> tag are used to define multiline in the text field.

Example :
<!DOCTYPE html>
<html>
<body>

<textarea rows="10" cols="80">
Project Code has been designed with an objective to help programmers by providing a free and complete source code that can be used in their own applications. This website is very useful for IT Developers and Professionals to exchange their knowledge and experience by using various interactive online methods such as contributing articles, discussion forums, books, and videos. This website is an idea of three professionals who wants to help those struggling to get specific details/code to complete their programs as well as helping them keep up to date with the latest technologies.
</textarea>

</body>
</html>

Output :


HTML Forms - <label> Tag

  • <label> tag is used to define information on label.

Example :
<!DOCTYPE html>
<html>
<body>

<form action="form.asp">
<label for="User Id">User Id</label>
<input type="text" name="UserId"><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

Output :
User Id


HTML Forms - <fieldset> Tag, <legend> Tag

  • <fieldset> tag is used to define information with in the field.
  • Defines a Sub-heading inside<fieldset> Tag

Example :
<!DOCTYPE html>
<html>
<body>

<form >
<fieldset>
<legend>Personal Detail</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

</body>
</html>

Output :
Personal Detail Name:
Email:
Date of birth:


HTML Forms - <select> Tag

  • <select> Tag is used to define drop down list.

Example :
<!DOCTYPE html>
<html>
<body>

<select>
<option value="Language">Language</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="C">C</option>
</select>

</body>
</html>

Output :
   
All Rights Reserved with Project code