HTML FORMS

An HTML form is used to collect user inputsuch as contact details like name, email address, phone numbers, or details like credit card information, etc.

The < form> Element

The HTML  is used to create an HTML form for user input:

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

 

<!DOCTYPE html>
<html>
<head>
<title>BOLD </title>
</head>
<body>

<form>

form elements

</form>

</body>
</html>

The < input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

input control

The < label> Element

The <label> tag defines a label for many form elements.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Text Fields

The <input type="text"> defines a single-line input field for text input.

 

<form>
  <label for=”name”>Name:</label><br>
  <input type=”text” id=”name” name=”name”><br>
  <label for=”age”> Age:</label><br>
  <input type=”text” id=”age” name=”age”>
</form>

text

Password Field

Password fields are similar to text fields. The only difference is; characters in a password field are masked

<form> <label for=user-pwd>Password:</label> <input type=password name=user-password id=user-pwd> </form>

pswd

Radio Buttons

Radio buttons let a user select ONE of a limited number of choices.

The <input type="radio"> defines a radio button.

 

<form>
  <input type=”radio” id=”male” name=”gender” value=”male”>
  <label for=”male”>Male</label><br>
  <input type=”radio” id=”female” name=”gender” value=”female”>
  <label for=”female”>Female</label><br>
  </form>

radio

Checkboxes

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

The <input type="checkbox"> defines a checkbox.

 

<form>
  <input type=”checkbox” id=”dance” name=”dance” value=”Dancing”>
  <label for=”dance”> Dancing</label><br>
  <input type=”checkbox” id=”singing” name=”singing” value=”Singing”>
  <label for=”singing”> Singing</label><br>
  <input type=”checkbox” id=”reading” name=”reading” value=”reading”>
  <label for=”vehicle3″> Reading</label>
</form>

chckbox

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

<form action=”/action_page.php”>
  <label for=”fname”>First name:</label><br>
  <input type=”text” id=”fname” name=”fname” value=”JAMES”><br>
  <label for=”lname”>Last name:</label><br>
  <input type=”text” id=”lname” name=”lname” value=”Albert”><br><br>
  <input type=”submit” value=”Submit”>
</form>

login

The Name Attribute for < input>

If the name attribute is omitted, the value of the input field will not be sent at all.

 

File Select box

The file fields allow a user to browse for a local file and send it as an attachment with the form data.

<form> <label for=file-select>Upload:</label> <input type=file name=upload id=file-select> </form>

fileupload