From tag in HTML
Form tag <Form/>
is used when we want to create a online form to capture data from end user
This is how your From tag may look like.
<from action="destination-page-url" method="post">
<input type="text" id="txtName" name="txtName"/>
<input type="submit" value="Submit" />
This is how your form will look like
Remember, while submitting the form, the method can be either method=post or method= get
Html Form methods
||all fields values will be posted directly, fields values will not be displayed in url
||all fields values will be passed through querystring, and fields values will be displayed in url
You can add any number of fields as per your business requirement inside the form tag, also can change the form display style using Css
here is another form example with different control type
Note : here we have used a table
to design the form elements, but you can use div
, that will be more responsive design
and have better rendering.
Here is the output
Notice, After submitting this form you will be able to see all the selected values on address bar, because we have kept form method = get.
enctype Attribute in html form
Now you learn another html form attribute called enctype
when you don't define anything then application/x-www-form-urlencoded
is default type.
There are three type of enctype in html form
||All characters are encoded before sent (special characters are converted to ASCII HEX values and space is converted to "+" symbol), This is Default
||Normally we use this when uploading any document, No characters are encoded
||Special characters are encoded, but space is converted to "+" symbol
Here is an example of enctype
<from action="destination-page-url" method="post" enctype="multipart/form-data">
<input type="file" id="idFilename" name="txtFilename"/>
<input type="submit" value="Upload" />
Login Form example
Here is another example of how you can write html code for a login form.
<form action="destination-url" method="post">
<input type="text" id="txtUsername" name="txtUsername" style="width: 80%;" />
<input type="password" id="txtPassword" name="txtPassword" style="width: 80%;" />
<div style="text-align: center;">
<input type="submit" value="Login" />