What are block elements and Inline elements?
Ans: Block Elements: Block elements appear on the screen as if they have a line
break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <ul>, <ol>, <dl>, <pre>, and <hr />elements are all block level
elements. They all start on their own new line, and anything that follows them
appears on its own new line.
Inline Elements: Inline elements, on the other hand, can appear within sentences
and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>,
<strong>, <sup>, <sub>, <big>, <small> and <li>elements are all inline elements.
HTML Forms: HTML Forms are required, when you want to collect some data
from the site visitor. For example, during user registration you would like to collect
information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end application
will perform required processing on the passed data based on defined business
logic inside the application. There are various form elements available like text
fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following
syntax –
<form action = "Script URL" method = "GET or POST">
form elements like input, textarea etc.
</form>
Form Attributes: An HTML form can have the following attributes.
Action: The action attribute specifies where the form data will be submitted
in the server once we submit the form.
Method: The method attribute species the method in which the form data
will be submitted into the server. There are 2 main methods: Post and Get.
Target: Specify the target window where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.
Enctype: You can use the enctype attribute to specify how the browser
encodes the data before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method
most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary
data in the form of files like image, word file etc.
HTML Form Controls: There are different types of form controls that you can
use to collect data using HTML form.
Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Button Control
1. Text Input Controls: There are 3 types of text input form, they are as
follows:
Single line text-input controls: This control is used for items that require
only one line of user input, such as search boxes or names. They are created
using HTML <input> tag. The basic syntax is
<input type= “text” />
Password input controls: This is also a single-line text input but it masks
the character as soon as a user enters it. They are also created using HTML
<input> tag. The basic syntax is
<input type= “password” />
Multi line text-input controls: This is used when the user is required to
give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag.
Attributes in Text-input controls:
Type: This attribute indicates what type of text-input control is it. Whether it
is a single line text input or a multi line text input or a password input can be
known from this attribute.
Name: Used to give a name to the control which is sent to the server to be
recognized and get the value.
Value: This can be used to provide an initial value inside the control.
Placeholder: Same as value attribute but once the user click on the text area,
the value disappears.
Required: This attribute forces the user to not keep the text field empty
Maxlength: This attribute specifies how many character a user can enter at
maximum.
2. Checkbox controls: Checkboxes are used when more than one option is
required to be selected. They are also created using HTML <input> tag but type
attribute is set to checkbox.
Attributes in Checkbox:
Type: Indicates the type of input control and for checkbox input control it
will be set to checkbox.
Name: Used to give a name to the control which is sent to the server to be
recognized and get the value.
Value: The value that will be used if the checkbox is selected.
Checked: Set to checked if you want to select it by default.
3. Radio Button Control: Radio buttons are used when out of many options,
just one option is required to be selected. They are also created using HTML
<input> tag but type attribute is set to radio.
<input type= “radio” />
Attributes of Radio Button:
Type: For radio input control it will be set to radio.
Name: Used to give a name to the control which is sent to the server to be
recognized and get the value.
Value: The value that will be used if the checkbox is selected.
Checked: Set to checked if you want to select it by default.
4. Select Box Control: A select box, also called drop down box which provides
option to list down various options in the form of drop down list, from where a
user can select one or more options.
Attributes of Select box control:
Attribute of <select> tag:
o Name: Used to give a name to the control which is sent to the server
to be recognized and get the value.
o Multiple: If set to "multiple" then allows a user to select multiple
items from the menu.
Attribute of <option> tag:
o Value: The value that will be used if an option in the select box box is
selected.
o Selected: Specifies that this option should be the initially selected
value when the page loads.
5. File Upload Box: If you want to allow a user to upload a file to your web
site, you will need to use a file upload box, also known as a file select box. This is
also created using the <input> element but type attribute is set to file.
6. Button control: There are various ways in HTML to create clickable buttons.
You can also create a clickable button using <input>tag by setting its type attribute
to button. The type attribute can take the following values –
Attributes of Button Control:
Submit: This creates a button that automatically submits a form.
Reset: This creates a button that automatically resets form controls to their
initial values.
Button: This creates a button that is used to trigger a client-side script when
the user clicks that button