HTML - tags - f....

revision:

Content

"fieldset" tag and "legend" tag : used to group several controls in a web form "figure" tag and "figcaption" tag : marks self-contained content "footer" tag : defines a footer in a document or section "form" tag : used to create a form for user input

"fieldset" tag and "legend" tag : used to group several controls in a web form

top

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form. The <fieldset> tag draws a box around the related elements.

Attributes of the <fieldset> element: it includes the global attributes and also supports the following additional attributes:

disabled: value : disabled; specifies that a group of related form elements should be disabled. If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <legend> element won't be disabled.

form : value: form_id; specifies which form the fieldset belongs to.

name : value: text; specifies a name for the fieldset.

The <legend> tag is used to define a caption for the <fieldset> element. The <legend> tag must be the first tag inside <fieldset>.

Attributes of the <legend> element: this element only includes the global attributes. Commonly used are "id", "class", and "style".

Syntax: 
            <fieldset> 
                <legend> . . . . . . . .</legend>
                . . . 
            </fieldset>

some examples

example
Choose your favorite animal 

code:
                <form class="example">
                <fieldset>
                    <legend>Choose your favorite animal
                    <input type="radio" id="cat" name="animal">
                    <label for="cat">cat</label><br/>
                    <input type="radio" id="dog" name="animal">
                    <label for="dog">dog</label><

                    <input type="radio" id="fox" name="animal">
                    <label for="fox">fox</label>
                </fieldset>
                </form>

example
Personalia: 







code:
            <form class="example">
                <fieldset>
                <legend>Personalia:</legend>
                <label for="fname">First name:</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label for="lname">Last name:</label>
                <input type="text" id="lname" name="lname"><br><br>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email"><br><br>
                <label for="birthday">Birthday:</label>
                <input type="date" id="birthday" name="birthday"><br><br>
                <input type="submit" value="Submit">
                </fieldset>
            </form>

example
Disabled fieldset 
coding:
            <form class="example" action="#">
                <fieldset disabled>
                <legend>Disabled fieldset
                <div>
                    <label for="name">name: 
                    <input type="text" id="name" value="Chris">
                </div>
                <div>
                    <label for="pwd">Archetype: 
                    <input type="password" id="pwd" value="Wookie">
                </div>
                </fieldset>
            </form>

example
Personal Information
Shipping Address
Payment Info 
code:
                <form class="example">
                <fieldset> 
                    <legend>Personal Information</legend> 
                    <label for="name">Name</label> 
                    <input name="name" id="name"> 
                    <label for="dob">Date of Birth</label> 
                    <input name="dob" id="dob" type="date"> 
                    </fieldset> 
                    <fieldset> 
                        <legend>Shipping Address</legend> 
                        <label for="add1">Address Line 1</label> 
                        <input name="add1" id="add1"> 
                        <label for="add1">Address Line 2</label> 
                        <input name="add2" id="add2"> 
                        <label for="city">City</label> 
                        <input name="city" id="city"> 
                        <label for="zip">Zip / Postal Code</label> 
                        <input name="zip" id="zip"> 
                    </fieldset> 
                    <fieldset> 
                        <legend>Payment Info</legend> 
                        <label for="cc-type">Credit Card</label> 
                        <select name="cc-type" id="cc-type"> 
                            <option value="Mastercard">Mastercard</option> 
                            <option value="Visa">Visa</option> 
                            <option value="Amex">American Express</option> 
                        </select> 
                        <label for="cc-number">CC Number</label> 
                        <input name="cc-number" id="cc-number"> <!-- A real payment form needs more info! --> 
                    </fieldset> 
                </form>

example
User basic information: 











code:
              <form class="example wd">  
                <fieldset class="wd">  
                  <legend>User basic information:</legend>  
                  <label>first Name</label><br>  
                  <input type="text" name="fname"><br>  
                  <label>last Name</label><br>  
                  <input type="text" name="lname"><br>  
                  <label>enter email</label><br>  
                  <input type="email" name="email"><br><br>  
                </fieldset><br>  
              <label class="tx">enter your feedback:</label><br>  
              <textarea class="tx" cols="30"></textarea><br><br>  
                <input  class="tx" type="Submit"><br>  
            </form>

"figure" tag and "figcaption" tag : marks self-contained content

top

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit and specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> element is used to add a caption for the <figure> element.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The difference with <img> is that <figure> with all its content is treated as a unit.

Attributes: this element only includes the global attributes. Commonly used attributes are: "id", "class", "style", "data-*", "hidden", and "title"

Syntax: 
            <figure> 
                <figcaption>. . . . . . . .
                </figcaption> 
                    . . 
            </figure>

some examples

example
on the beach
Spending a good time on the beach
code:
            <figure>
            <img src="../pics/8.jpg"  alt="on the beach">
            <figcaption>Spending a good time on the beach</figcaption>
        </figure>

example

Get browser details using navigator.
                    function NavigatorExample() {
                        var txt;
                        txt = "Browser CodeName: " + navigator.appCodeName + "; ";
                        txt+= "Browser Name: " + navigator.appName + "; ";
                        txt+= "Browser Version: " + navigator.appVersion  + "; ";
                        txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
                        txt+= "Platform: " + navigator.platform  + "; ";
                        txt+= "User-agent header: " + navigator.userAgent  + "; ";
                        console.log("NavigatorExample", txt);
                    }
                
code:
            <figure>
                <figcaption>Get browser details using <code>navigator</code>.</figcaption>
                <pre>
                    function NavigatorExample() {
                        var txt;
                        txt = "Browser CodeName: " + navigator.appCodeName + "; ";
                        txt+= "Browser Name: " + navigator.appName + "; ";
                        txt+= "Browser Version: " + navigator.appVersion  + "; ";
                        txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
                        txt+= "Platform: " + navigator.platform  + "; ";
                        txt+= "User-agent header: " + navigator.userAgent  + "; ";
                        console.log("NavigatorExample", txt);
                    }
                </pre>
            </figure>

example
Edsger Dijkstra:
If debugging is the process of removing software bugs, then programming must be the process of putting them in.
code:
            <figure>
                <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
                <blockquote>If debugging is the process of removing software bugs,
                then programming must be the process of putting them in.</blockquote>
            </figure>

example
Fig.1 - Sunset on the river
Fig.2 - A good time on the beach
code:
                <figure style="display: flex; padding:1vw;border:0.3vw solid lightblue;">
                    <img src="../pics/1.jpg" width="200" height="140"/>
                    <figcaption>Fig.1 - Sunset on the river</figcaption>
                    <img src="../pics/2.jpg" width="200" height="140"/>
                    <figcaption>Fig.2 - A good time on the beach</figcaption>
                </figure>

example 
                
                    p {
                        color: #333;
                        font-family: Helvetica, sans-serif;
                        font-size: 1rem;
                    }
                
                
code:
            <figure>
                <pre>
                    <code>
                    p {
                        color: #333;
                        font-family: Helvetica, sans-serif;
                        font-size: 1rem;
                    }
                    </code>
                </pre>
            </figure>

"footer" tag : defines a footer in a document or section

top

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains: authorship information, copyright information, contact information, sitemap, back to top links, related documents.You can have several <footer> elements in one document.

Attributes: the <footer> element supports the global attributes and events attributes.

Syntax : <footer> . . . </footer>

some examples

example

Codes:

                <footer>
                    <p class="spec">Author: Fred Flintstone<br>
                    <a href="mailto:somebody@example.com">somebody@example.com</a></p>
                </footer>

example

Company

  • About Us
  • Careers
  • Privacy Policy
  • Contact Us

Learn

  • Algorithms
  • Data Structures
  • Languages
  • CS Subjects
  • Video Tutorials

Practice

  • Company-wise
  • Topic-wise
  • Contests
  • Subjective Questions

Codes:

                <style>
                    .column {float: left;  width: 27%; height: 30vw;}
                </style>
                <div>

"form" tag : used to create a form for user input

top

The <form> tag is used to create an HTML form for user input. It can contain one or more of the following form elements: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>, <output>.

Attributes : this element includes the global attributes. It also supports the following additional attributes:

accept-charset : value: character_set; space-separated character encodings the server accepts. The browser uses them in the order in which they are listed.
The default value means the same encoding as the page.

autocomplete : indicates whether input elements can by default have their values automatically completed by the browser. "autocomplete" attributes on form elements override it on <form>.
Possible values: off (the browser may not automatically complete entries), on (the browser may automatically complete entries).

name : value: text; the name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.

rel : value: external, help, license, next, nofollow, noopener, noreferrer, opener, prev, search;specifies the relationship between a linked resource and the current document; creates a hyperlink or annotation depending on the value.

action : value: URL; the URL that processes the form submission.

enctype : if the value of the "method" attribute is "post", enctype is the MIME type of the form submission. Possible values: application/x-www-form-urlencoded (the default value), multipart/form-data (use this if the form contains <input> elements with "type=file"), text/plain (introduced by HTML5 for debugging purposes).

method : the HTTP method to submit the form with. Possible (case insensitive) values: post (the POST method; form data sent as the request body), (the GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side-effects), dialog (when the form is inside a <dialog>, closes the dialog on submission).

novalidate : this Boolean attribute indicates that the form shouldn't be validated when submitted.

target : indicates where to display the response after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a browsing context (for example, tab, window, or iframe). The following keywords have special meanings: "_self (default)"": load into the same browsing context as the current one; "_blank": load into a new unnamed browsing context, "_parent": load into the parent browsing context of the current one; if no parent, behaves the same as _self; "_top": load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent); if no parent, behaves the same as _self.

Syntax: 
            <form action="server url" method="get | post"> 
                    //input controls e.g. textfield, textarea, radiobutton, button 
            </form>

some examples

example 


coding:
                <form class="example" action="/action_page.php">
                    <label for="fname">first name:</label>
                    <input type="text" id="fname" name="fname"><br>
                    <label for="lname">last name:</label>
                    <input type="text" id="lname" name="lname"><br>
                    <input type="submit" value="Submit">
                </form>

example
title 
code:
                <div class="spec">
                    <form class="example">
                        <label>name:
                        <input name="submitted-name" autocomplete="name">
                        </label>
                        <button>save</button>
                    </form>
                    <form class="example" method="post">
                        <label>name:
                        <input name="submitted-name" autocomplete="name">
                        </label>
                        <button>save</button>
                    </form>
                    <form class="example" method="post">
                        <fieldset>
                            <legend>title</legend>
                            <label><input type="radio" name="radio">sselect me</label>
                        </fieldset>
                    </form>
                </div>

example
Company:
Address: 
coding:
                <form class="example" action="" method="get">
                    Company:  <input type="text" name="company"> <br>
                    Address:  <input type="text" name="address"> <br>
                    <input type="submit" value="Submit">
                </form>

example


name:

username:

password:

blood group:

age:

mobile number:

email:

address: 

code:
            <div class="spec ">
                <form class="example" name="fileform" method="post" action="uploadImage" enctype="multipart/form-data">
                <label for="photo">portrait photo: </label>
                    <input type="file" name="photo" size="50" placeholder="upload your image" required /><br>
                    <br> <input type="submit" value="Save">
                </form>
                <form action="DonarRegister">
                    <p class="example">name: <input type="text" name="name" placeholder="Name"></p>
                    <p class="example">username:<input type="text" name="username" placeholder="User_name"></p>
                    <p class="example">password:<input type="Password" name="password" placeholder=".........."></p>
                    <p class="example">blood group:<input type="text" name="bloodgroup" placeholder="O positive"></p>
                    <p class="example">age:<input type="number" name="age"></p>
                    <p class="example">mobile number:<input type="text" name="mobilenumber" placeholder="......"></p>
                    <p class="example">email: <input type="text" name="email" placeholder="......"></p>
                    <p class="example">address: <input type="text" name="address" placeholder="village/town/district"></p> 
                    <input class="example" type="submit" name="" value="Register">
                </form>
            </div>