Html form source code + explaination
27: Code for basic HTML form:
<!DOCTYPE html>
<html>
<head><title>Website</title></head>
<body>
<form action="">
<div>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" placeholder="First" required>
</div>
<br>
<div>
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname" placeholder="Last" required>
</div>
<br>
<div>
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" maxlength="12" required>
</div>
<br>
<div>
<label for="mail">Email:</label>
<input type="email" name="mail" id="mail" placeholder="name@gmail.com" required>
</div>
<br>
<div>
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone" placeholder="03001234567" required>
</div>
<br>
<div>
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday" required>
</div>
<br>
<div>
<label for="quan">Quantity:</label>
<input type="number" name="quan" id="quan" min="1" max="20" value="1" required>
</div>
<br>
<div>
<label for="title">Title:</label>
<label for="mr">Mr.</label>
<input type="radio" name="title" id="mr">
<label for="mrs">Mrs.</label>
<input type="radio" name="title" id="mrs">
<label for="r"> Not Specified</label>
<input type="radio" name="title" id="r">
</div>
<br>
<div>
<label for="pay">Payment Option:</label>
<select name="pay" id="pay" >
<option value="mastercard">Mater Card</option>
<option value="visa">Visa</option>
<option value="jazzcash">Jazz Cash</option>
<option value="easypaisa">Easy Paisa</option>
<option value="COD">Cash on Delivery</option>
</select>
</div>
<br>
<div>
<label for="sub">Subscribe:</label>
<input type="checkbox" name="sub" id="sub">
</div>
<br>
<div>
<input type="reset">
</div>
<br>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
- To make a form you first have to use <form action=""></form> .
- It is better to make <div></div> for every entity in the form.
- In every entity when you have to write the name of the entity you have to use <label for=""></label> .
- In this tag, write the specific name that you want to give to the entity within for=" " .
- Write the name of the entity between > <
- To take specific type of input use <input type="" name="" id="">
- Here write the type of text that you want to take as input in type=" "
- Write the same name that you write between for='' " in name=" " and id" " .
- By doing this when you will click even on the name of the entity, it will let you write in the box.
- Input types:
- button
- checkbox
- color
- date
- datetime
- datetime-local
- files
- hidden
- image
- month
- number
- password
- radio
- range
- reset
- search
- submit
- tel (used when a phone number is required)
- text
- time
- url
- week
- Placeholder: You can add place holder placeholder="" in the input tag, and this will make sample text to show inside the box where you have to make an input.
- Required: You can use a required within the input tag, due to which, you won't be able to proceed to submit before entering required data in that field.
- While using password as input, you can set maximum length of character as a password using maxlength="" and between " " you can add number of maximum characters.
- Date: When date is used as input type, a small calendar will be shown on the screen to choose specific date.
- Number: When number is used as input type, two small arrows will be shown inside the entery box to increase or decrease the number.
- You can also use min="" to set a minimum value, max="" to set a maximum value and value="" to choose a default.
- Radio: Using radio as input type will make a circle on the screen that can be marked.
- If you want to only to choose one option, give all radio the same name.
- If you want to choose multiple options within the same div, you can set everyone's name different.
- Note: In both cases, for and id should be different for each radio
- Checkbox: Input type checkbox will make a box on the screen that you can tick.
- List to select one option: If you want to make a list to select one option from, use the tag <select name="" id=""></select> and within > < , you can write all the option by making <option value=""></option> tag for every option in which:
- You can write the option within > < .
- And you can give that option a specific name within value=" " .
- Reset: Input type reset will make a reset button that will remove all of your entered data.
- Submit: Input type submit will let you submit your entered data.
Comments
Post a Comment