Monday, 23 November 2015

How to Make a Form and Attribute in simple Html

Posted by
A form is very important topic in html .in this artical we learn about form and form attributes  and form elements.
it is code for making very simple form .it is very easy just copy and past in notepad and save form.html .then open in browser ,

<html>
<head>
<title>Html Form</title>
<style>
.box
{
width:60%;
margin:0 auto;
color:red;
padding:10px;
text-align:center;
background-color:gray;
}
</style>
</head>
<body>
<div class="box">
<form>
<label>First Name</label>
<br />
<input type="text" name="fname" required="required" placeholder="Enter First Name" maxlength="10"  />
<br />
<label>Last Name</label>
<br />
<input type="text" name="lname" required="required" placeholder="Enter Last Name" maxlength="10"  />
<br />
<label>Email</label>
<br />
<input type="email" name="email" required="required" placeholder="Enter Email" />
<br />
<label>Gendar</label>
<br />
<input type="radio" name="gendar" value="male"/>Male
<br />
<input type="radio" name="gendar" value="female" />Female
<br />
<label>Password</label>
<br />
<input type="password" name="password" required="required" placeholder="Enter Password" maxlength="10" />
<br />
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>

</html>


out put of this coding display in browser 






Explain coding.


input type="text"

Type text means only get text .text means any alphabets, numbers ,symbols can give input.

example 


 required="required"

required is a html 5 form attributes it is a condition means when you not write on input field and submit the form .it show message ."Pleas fill out the field"  .and not submit the form, 


placeholder=placeholder

place holder is a text write on input field tell the user how to write and what write in this field .in other words it is hint for user .it use in html5 .



input type="password"

input type ="password" take any character number symbols not show .look in hidden form .


maxlength="10"


maxlength="10" attribute use for set input field length maxlength set the you can give only 10 characters .it take only 10 character you increase the length 50 then take 50 character .

name="fname" 

name is input field attribute use to specify and set the unique name of input field .the unique name use when print and get the value of this field .the name is must be unique  same name not use for two or three input fields

<label></label>

label is a tag it use to show any labels .start from <label>write any ony one in between show on browser </label>

input type="email"

input type ="email" is a html5 attributes it take only email format if user enter wrong format it give the error it accept  "demo@gmail.com" it is correct format of this attribute if user enter  out of character in this format it generate a error.



input type="radio"

input="radio" field use set the radio buttons when you have more then one choice and chose one choice then use radio buttons .
in this form form take two radio button one is male and other is female . then name is gender in male and female field .only select one .gender name get one value at a time.and display.



input type="submit"

input type "submit" use for button use for submit form and also other field for button is input type ="button" ,

value="Submit"

in value="submit" use for show name of button you give any value display in button.


Note: i try to write and convey this artificial very easy words and easy way if you have any problem understanding this artificial kindly give the comment .Thanks.









1 comment: