Form Input elements brief.
<h2>More Inputs</h2>
<form action="/birds">
Checkbox:-
name:- it is the element that contains the data to the server.
id:- id is the unique name given to the tag.
checked:- it is the element to the tag, that defines the precondition of the checkbox, that checkbox is active.
<label for="agree">terms and condition</label>
<input type="checkbox" name="agree_tos" id="agree" checked>
Radio button:-
name:- it is the element that contains the data to the server, if the name of all radio button will be same then, you can select only one radio button.
id:- id is the unique name given to the tag.
value:- we can define the hardcoded value, which will send to the server.
<p>
<label for="xs">xs</label>
<input type="radio" name="size" id="xs" value="xs">
<label for="s">S</label>
<input type="radio" name="size" id="s" value="s">
<label for="m">M</label>
<input type="radio" name="size" id="m" value="m">
</p>
dropdown
select:-it is the type by which we define the dropdown.
option:-it is the way to give the data to the dropdown.
value:- we can define the hardcoded value, which will send to the server.
<p>
<label for="meal">Please select meal</label>
<select name="meal" id="meals">
<option value="fish">fish</option>
<option value="chicken">chicken</option>
<option value="starfish">starfish</option>
</select>
</p>
Range:-
min:- the minimum amount which we can provide the server by range.
max:- the maximum amount which we can provide the server by range.
value:- the hardcoded value which will be provided to the server, but the user can change it.
step:- the data which will be forced to select user the data always in (min+step) with the min value.
<p>
<label for="cheese">cheese</label>
<input type="range" name="level" min="1" max="100" step="5" value="75" id="cheese">
</p>
Number:-
min:- the minimum amount which we can provide to the server.
max:- the maximum amount which we can provide to the server.
value:- the hardcoded value which will be provided to the server, but the user can change it.
step:- the data which will be forced to select user the data always in (min+step) with the min value.
placeholder:- can be used in number to display text as a guide.
<p>
<label>enter a number</label>
<input type="number" placeholder="enter" name="num" min="1" max="100" step="5" value="75" id="cheese">
</p>
text area:-
cols:- (breath will increase, vertical height) the no. column space you are providing initially and it can be extended later by the user if needed.
rows:- (height will increase, horizontal height) the no. rows space you are providing initially and it can be extended later by the user if needed.
<p>
<label for="">Any address</label>
<textarea name="name" id="requests" cols="30" rows="10" placeholder="type"></textarea>
</p>
<button type="submit">submit</button>
</form>
Comments
Post a Comment