Html form
There are multiple tags for building the model in html form, through which we can beautify many data from within the HTML page. These tags help us to enter a variety of data, including what is previously stored and selected, and what we write manually.
1. Types of HTML form
As we mentioned earlier, there are a good number of templates that contain different tags, as we will focus on:
- Text: which saves the texts we have typed as the user name, for example.
<input type="text" name="username" maxlength="10">
- Passwords: which consists in encrypting the password display and converting it into points.
<input type="password" name="password" >
- Text Area: In which we type a large number of words.
<textarea rows="4" cols="60" readonly> This is our text area</textarea>
- Files: It is the format that enables us to upload files.
<input type="file">
- Checkbox checkbox: which we can activate or deactivate.
<input type="checkbox">
- Radio button: It is a multiple choice.
<input type="radio" name="browser" value="chrome"> Car <br>
- Submit button: which saves the previous values entry.
<input type="submit" value="Sign Up">
- Restore button: It clears all fields.
<input type="reset" value="Restore Default">
We have mentioned the most important input tags in the HTML language, which we will display in full code.
2.Example
Please, to understand the forms Elements well, copy the following codes into a text file and do not forget to change its extension to .html and then run it in your browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Html for beginners">
<title>Form part2 Textarea , Fieledset , Legend ,Select ,Option</title>
<link rel="stylesheet" href="style.css">
<style>
fieldset{background:#5CE1E6; padding:10px; border:1px solid #5CE1E6;margin-bottom:20px}
legend{background:#FFF;border:1px solid #5CE1E6; padding:5px}
</style>
</head>
<body>
<form name="register">
<!--This is how to use fieldset-->
<fieldset>
<legend>Personal Information</legend>
<label>Username</label>
<input type="text" name="username" maxlength="10">
<br>
<label>Password</label>
<input type="password" name="password" >
<br>
<label>Your Message</label>
<br>
<!--This is how to create textarea-->
<textarea rows="4" cols="60" > This is our text area</textarea>
<!---------------------------------->
<br>
<label>Upload your CV</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember Me</label>
</fieldset>
<!----------------------------------->
<br>
<br>
<!--Using feildset again-->
<fieldset>
<legend>Your favorite transportion</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Car"> Car <br>
<input type="radio" name="browser" value="bus"> bus <br>
<input type="radio" name="browser" value="truck"> truck <br>
</fieldset>
<br>
<!--------------------------->
<fieldset>
<input type="submit" value="Sign Up">
<input type="reset" value="Restore Default">
</fieldset>
</form>
</body>
</html>