Creating a html form / get and post (lt.10)
For creating a form in html we have form tag, inside form tag we can use several tags.
For input the text we use input tag, but if we have to input multi-line text then we use textarea tag.
label tag: Use to highlight the input text area.
Id use: It is used in front end i.e in browser , for uniquely identifying for html elements. This can be useful for styling the input element with CSS or for accessing it with JavaScript. We can use the id attribute if we need to uniquely identify an input element for styling.
Name use : It is used in the server side, so better to use a unique name for different fields to distinguish it from other form fields. name attribute is used to identify the input element in a form. When a form is submitted, the values of all input elements with a name attribute are sent to the server. We should use the name attribute for all input elements that we want to submit with a form.
radio button: input type="radio" if we have to select a single selection then we have to give the same name to all inputs else for multi selection we have to give different names or no name input.We have to provide value referring to the corresponding input type.
type =submit : we can submit the form.
fieldset : It draws an outline covering the form
legend: Used to set a header in top left corner of the form.
HTML supports only two methods i.e get and post.
method attribute: In html we use only get and post.
get in this method data is saved and url and goes to the server through it but due to security issues we don't use it
post: Data doesn't goes to url , the form data is included in the request body . This allows for more extensive and sensitive data to be sent securely.
readonly: User can only read the data and cant change it
disabled: The user can see data , cant change it or copy it.
The below code will demonstrate the use case :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form</title>
</head>
<body>
<form method="post">
<!--used to create a box-->
<fieldset>
<!-- TEXT WILL BE WRITTEN IN TOP LEFT -->
<legend>user details</legend>
<!-- FORM IN HTML USED TO CREATE FORM FOR USER INPUT -->
<form>
<label for="name"> enter your name</label>
<!-- TYPE use to tell type of data text , numbers.. -->
<input type="text" id="name" name="username" placeholder="himanshu"/>
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
</form>
<form>
<!-- <label for="address">enter address</label> -->
<textarea id="address" cols="30" rows="10"></textarea>
<br />
<label for="dob">date of birth</label>
<input type="date" id="dob" name="dob" />
<br />
<label for="usermail">enter mail </label>
<br/>
<input type="usermail" id="usermail" name="usermail" value="gkd@gmail.com" disabled>
<!-- DISABLED - cant edit -->
<br/>
<!-- label use to highlight -->
<label for="password">enter password</label> <br/>
<input type="password" id="password" name="password" / autofocus>
<!-- autofocus -- focus bt default-->
<br >
gender:
<br />
<!-- for single selection -->
<label for="male">none</label>
<input type="radio" id="none" name="gender" value="none"/>
<br />
<label for="male">male</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">female</label>
<input type="radio" id="female" name="gender" value="female"/>
<br />
<!-- for MULTIPLE selection -->
select many
<br />
<label for="male">none</label>
<input type="checkbox" id="none" name="gender" />
<br />
<label for="male">male</label>
<input type="checkbox" id="male" name="gender" />
<br />
<label for="female">female</label>
<input type="checkbox" id="female" name="gender" />
<br />
<!-- NUMBER -- -->
<input type="number" min="0" max="20">
<!-- FORM SUBMIT -->
<input type="submit" value="submit form"/>
</form>
</fieldset>
</form>
</body>
</html>