Scribd
Upload
109 views13 pages

HTML Inline and Block Elements Guide

The document discusses different types of HTML elements including inline elements like links and buttons that display on the same line and block elements like headings and paragraphs that start on a new line. It also covers HTML form elements like labels, text inputs, submit buttons, and select dropdowns that are used to collect user input in forms.

Uploaded by

riya joseph
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
109 views13 pages

HTML Inline and Block Elements Guide

The document discusses different types of HTML elements including inline elements like links and buttons that display on the same line and block elements like headings and paragraphs that start on a new line. It also covers HTML form elements like labels, text inputs, submit buttons, and select dropdowns that are used to collect user input in forms.

Uploaded by

riya joseph
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

Types of Elements &Form tags

DAY 5
TYPES OF ELEMENTS

 INLINE ELEMENTS
 BLOCK ELEMENTS
[Link] ELEMENTS

 An inline element does not start on a new line.


 An inline element only takes up as much width as necessary.
 Eg:
<a>
<img>
<input>
<i>
<button>
These all display in line
[Link] ELEMENTS

 A block-level element always starts on a new line, and the browsers


 automatically add some space (a margin) before and after the element.
 A block-level element always takes up the full width available.
 Eg:
<h1></h1>
<p></p>
<footer>
<form>
<main>
FORM

 form is used to collect user input. The user input is most often sent to a server for
processing.
 <form> element is used to create an HTML form for user input.
Eg: <form>
<!--form elements-->
</form>
FORM ELEMENTS

 <label>: It defines label for <form> elements or to display the text as label.
 <input>: It is used to get input data from the form in various types such as text,
password, email, etc by changing its type.
 <button>: It defines a clickable button to control other elements or execute a
functionality.
 <select>: It is used to create a drop-down list.
 <textarea>: It is used to get input long text content.
 <option>: It is used to define options in a drop-down list.
LABEL

 The <label> tag defines a label for many form elements.


 <lable for="">Username</label>
 Set the identifier (id) inside the <input> element and specify its name as a for attribute for
the <label> tag.

<label for="lfname">First name:</label>


<input id="lfname" name="fname" type="text" />
INPUT TAG

 An <input> element can be displayed in many ways, depending on the type attribute.
 <input type="text"> Displays a single-line text input field
 <input type="radio"> Displays a radio button (for selecting one of many choices)
 <input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
 <input type="submit"> Displays a submit button (for submitting the form)
 <input type="button"> Displays a clickable button
SUBMIT BUTTON

 -The <input type="submit"> defines a button for submitting the form data to a form-
handler.

 <input type="submit" value="Submit">


or
 <button type="Submit"> Login</button>
REGISTRATION

 <input type="button">  <input type="radio">


 <input type="checkbox">  <input type="range">
 <input type="color">
 <input type="reset">
 <input type="date">
 <input type="search">
 <input type="email">
  <input type="submit">
<input type="file">
 <input type="hidden">  <input type="text">
 <input type="image">  <input type="time">
 <input type="month">  <input type="url">
 <input type="number">
 <input type="week">
 The default value of the type attribute is
"text".  <input type="password">
TASK
Task 2

Common questions

Powered by AI

The <label> element associates with form input elements using the 'for' attribute that matches the 'id' of the input element. This setup enhances accessibility by ensuring that when users click on the label, the corresponding input field is focused. For example, <label for='lfname'>First name:</label> links to <input id='lfname' name='fname' type='text' /> .

The <form> element is used to collect user input for processing, generally by sending it to a server. It organizes input fields, buttons, and labels into a coherent structure, allowing for efficient data collection and user interaction .

Inline elements do not start on a new line and only take up as much width as necessary. Examples include <a>, <img>, and <input>. In contrast, block elements always start on a new line and take up the full width available, with browsers adding automatic spacing before and after. Examples are <h1>, <p>, and <form> .

<input type='radio'> allows users to select one option from a set, making it suitable for mutually exclusive choices such as gender or payment methods. In contrast, <input type='checkbox'> allows multiple selections, useful for situations requiring multiple answers, such as selecting newsletter preferences .

<input type='hidden'> is used to store data that should not be visible or edited by users but is needed during form submission. It can hold values like user IDs or security tokens that are required for backend processing but must remain confidential from end-user interaction .

The <select> element creates a dropdown list, with associated <option> tags specifying individual items that can be selected by the user. Each <option> can have a value and display text, facilitating choices between different predefined options. For example, within <select>, multiple <option> elements are enumerated to form the dropdown's list items .

The <textarea> element allows users to input multi-line text, unlike single-line text inputs generated by <input type='text'>. This feature is advantageous for collecting more detailed information, such as comments or feedback .

<input type='submit'> and <button type='submit'> elements create buttons that, when clicked, submit the form data to a specified server-side form-handler for processing. These elements trigger the form's action attribute, usually a URL, completing the user input cycle .

The <input> element facilitates various types of user input by varying its 'type' attribute, which can be set to 'text', 'radio', 'checkbox', 'submit', etc. This attribute determines the control's behavior and appearance, such as displaying text fields, checkboxes, or buttons within a form .

When the type attribute is omitted in an <input> tag, it defaults to 'text', thereby creating a single-line text input field by default. This fallback behavior reflects the most basic and commonly required input form .

You might also like