Hey there, today is my last day of learning HTML and today I learnt about input forms. I have discussed about form element in this blog ahead. To give you a full insight of what did I learn in html in last 7 days, I have prepared a table.
Days | Topics | Code Link | Blog Link |
---|---|---|---|
Day 1 | Syntax | Syntax | Blog |
Day 2 | Headings and Lists | Headings Lists | Blog |
Day 3 | Formatting Tags | Formatting | Blog |
Day 4 | Images | Images | Blog |
Day 5 | Tables | Table | Blog |
Day 6 | Anchor Tag | Anchor | Blog |
Day 7 | Navigation Bar | Navigation bar | Blog |
Topics:
What is a form in html?
- A form is used to take inputs from users.
- HTML5 introduced <form> element which is very useful in websites.
- A form element is a container element.
- These inputs are then sent to the server where these inputs are processed and further actions are taken.
- Mostly these form inputs are stored in a database.
- A form contains many form controls such as a textbox, radio button, checkbox, submit button etc.
- These controls are used for filling up the form.
- Some examples of commonly used forms in websites are registration form, login form, add payment info form etc.
- A brief introduction to such form controls is given below.
Input element and its types:
- Input element is the most important form elements.
- The <input> element specifies a input field in which users can fill required data.
- The appearance of a input filed can be changed based on the "type" attribute.
- Syntax of input element is given below:
<form>
<input type="" name="" id="">
</form>
- Some of the commonly used input type attributes are listed below.
- text:
- The type="text" attribute is used to create a single line input field.
- This input field is a textbox, in which users can enter their name or user id or some plain text depending on what is asked.
- The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
- Syntax :
<input type="text" name="username" id="u_name">
- password:
- The type="password" is used to enter password.
- This type attribute encodes the password.
- The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
- Syntax:
<input type="password" name="pass" id="u_pass">
- email:
- The type="email" is used for entering email id in the input field.
- This attribute checks for a "@" sign and a ".com" to validate that entered data is an email id.
- The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
- Syntax:
<input type="email" name="email" id="u_email" placeholder="someone@gmail.com">
- tel:
- The type="tel" attribute is used to enter phone number.
- It checks for number in input field and does not takes alphabets or letters as a parameter.
- The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
- Syntax:
<input type="tel" name="phone" id="p_num" placeholder="9137000000">
- submit:
- The type="submit" attribute is a submit button.
- When clicked, this attribute submits the entered data to the server.
- The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
- Syntax:
<input type="submit" name="submit" value="Register" id="u_sub">
Create a form in html
The following code creates a simple form in html:
<form>
<p>Enter your name: <input type="text" name="username" id="u_name" placeholder="John"></p>
<p>Enter your password: <input type="password" name="pass" id="u_pass"></p>
<p>Enter E-mail id: <input type="email" name="email" id="u_email" placeholder="someone@gmail.com"></p>
<p>Enter Phone No.: <input type="tel" name="phone" id="p_num" placeholder="9137000000"></p>
<p><input type="submit" name="submit" value="Register" id="u_sub"></p>
</form>
<form>
<input type="text" name="username" id="u_name">
</form>
The full code for this blog is available on my GitHub and all the blogs of html are listed below.
All Links:
Comments
Post a Comment
If you have any doubts, Please let me know.