Saturday, October 29, 2022

html form tag

                    HTML Tag 

Form Tag


1]File Upload Tag


<input type="file">

A control that lets the user selects a file. Use the accept attribute to define the type of files that the control can select.


File Tag program 

<!DOCTYPE html>

 <html>

<body>

<h1>File upload</h1>

 <p>Show a file-select field which allows a file to be chosen for upload:</p>

 <form action="/action.php">

 Select a file: <input type="file" name="myFile"><br><br>

<input type="submit">

</form>

</body>

 </html>

file Tag Output


File program output


2]Submit  Button

<input type= "submit">

A button that submit the form.<input type ="submit"> defines a button for submitting form data to form-handler. The form-handler is typically a server page with a script for processing input data. the form -handler is specified in the forms action attribute.


Submit Tag program 

 <!DOCTYPE html>

 <html>

 <body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

 <form action="/action.asp">

 First name:<br>

 <input type="text" name="firstname" value="Sanjay"><br>

Last name: <br>

 <input type="text" name="lastname" value="jadhv"><br><br>

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

</form>

<p>If you click "Submit", the form-data will be sent to a page called "/action.asp"</p>

</body>

</html>


submit Tag output

Submit program output


3] Reset Tag 

<input type="reset">

A button that resets the contents of  the form to default values.


Reset tag program 

<!DOCTYPE html>

<html>

<body>

<h2>Reset Button</h2>

<p>Reset button that will reset all form values to their default values </p>

 <form action="/action.asp">

 First Name :<input type="text" name="firstname" value="Surya"><br>

 Last name :<input type="text" name="lastname" value="Rad><br><br>

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

<input type="reset">

</form>

<p>If you change the input values and then click the "Reset" button,<br> the form-data will be reset to the default values.</p>

</html>


Reset tag output


Reset tag output

4] button Tag

<input type="button">

Buttons are created as the final component of any form. A button lets the user trigger son events like submission of data, upload/download or any kind of alert/message.


Button Tag program 

<!DOCTYPE html>

<html>

<body>

<h2>Input Button</h2>

<input type="button" onclick="alert("Hello World!')" value="Click Me!">

 </body>

</html>

Button Tag output 

Button Tag output


5] Checkbox Tag


<input type="checkbox">

A check box allowing multiple values to be selected/de selected.


Checkbox Tag program 

<html>

 <body>

 <h2>Checkboxes</h2>

<p> The<strong>input type="checkbox"</strong>

defines a checkbox</p>

<form action="/action_page.php">

 <input type="checkbox" name="vehicle1" value="sports car">

<P>I have sports car</p><br>

<input type="checkbox" name="vehicle2" value="Luxury Car"> 

<P>I have a Luxury car</p><br><br>

<input type="submit">

</form>

</body>

</html>

Checkbox Tag output 


Checkbox Tag output


Visit This Link

To Your extra information 



HTML meta attribute





Wednesday, October 26, 2022

html form tag

  HTML Tag 



 

 Form Tag

HTML Forms are one of the main parts of communication between a user and a web site or web application. HTML forms serve the purpose of collecting information provided by the users.

       Forms are required to take input from the user who visits the website. This form is used basically for the registration process, logging into your profile on a website or to create your profile on a website, etc … The information that is collected from the form is - Name , password  etc. Now the form will take input from the form and post that data in backend applications. So the backend application will process the data which is received by them. There are various form elements that we can use like text fields, text area, drop-down list, select, checkboxes, radio, etc.


Attributes 


1) Action :-

Form action tells us about the page name where form data has been processed.to send the data that the user will submit.


2) method :-

Method to be used to upload data. The two methods are GET and POST. 


1) Get Method : - It has a limited length of characters of URL. we should not use get to send some sensitive data. This method is better for non-secure data.

2) Post Method : -It has no size limitations. The submission of the form with the method post, can not be bookmarked.


3) Target :-

Specify the target window or frame where the result of the form action will be displayed. It takes values like blank,_self,_parent etc.

 

Form  Tag program 


<!Doctype html>

<html>

<Body>

<form>

<fieldset>

<legend>Log in </legend>

<label>Username: <input type="text"></label><br>

<label>Password: <input type="password"></label><br>

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

</fieldset>

</form>

</Body>

</html>


Form Tag  output 




Form Type

 

1) Input Type 

The HTML <input> element is used to create interactive controls for web-based forms in order to data from the user a wide variety of types of input data and control widgets are available depending on the device and user agent.


1) <input type = "text">

A single line text field. We can use the maxlength and minlength attributes to specify the maximum length and minimum length of the value that can be entered. 


Program 

<html>

<body>

 <form>

First name:<br>

<input type="text" name="firstname">

<br>

  Last name:<br>

<input type="text" name="lastname">

 </form>

</body>

</html>


Input Type output 


2) <input type="password">


A single line text field same as text but only difference is that it's value is hidden. 


Program 


<html>
<body>
<form>
 User name :<br>
<input type="text" name="username"><br>
User password :<br>
<input type="password" name="password">
</form>
</body>
</html>


Input type output
 




Attribute Description 




1) Type :  Indicates the type of input control and for text input control it will be set to text.


2) Name: Used to give a name to the control which is sent to the server to be recognized and get the value.


3)  Value: This can be used to provide an initial value inside the control. 


4) Size: Allows to specify the width of the text-input control in terms of characters. 


5) Maxlength: Allows to specify the maximum number of characters a user can enter into the


6) Placeholder:- It is used to give a hint about what to input. 

7) Readonly : it is used to make a textbox readonly "un-writable"
 

HTML Radio button :

3) <input type = "radio">


A radio button, allowing a single value to be selected out of multiple choices. Or we can say that it is used to restrict user to choose only one option out of many.


Program 


<!DOCTYPE html>

<html>

<body>

 <h2>Radio Buttons</h2>

 <p>The <strong>input type="radio"</strong> defines a radio button:</p>

<form action="/action">

<input type="radio" name="grade" value="First" checked> First<br>

<input type="radio" name="grade" value="Second"> Second<br> 

<input type="radio" name="grade" value="Third"> Third<br>

<input type="radio" name="grade" value="Fail"> Fail<br><br>

<input type="submit">

</form>
</body>
</html>

3) <input type = "radio">  


Output 





      Visit This Link

   To Your extra information 





Thursday, October 6, 2022

html List attributes tag


List Tag


Html List Tag


Lists Tag



List is a method that HTML offers for specifying any information or data in list style on web page. All lists can contain one or more heading or text. In a web page, list items like headings or any text starts with <li> and ends with </li>. But before writing any list item, it must to specify the list type. There are three types of lists you can use.

A list is a record of short pieces of related information or used to display the data or any information on web pages.
The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu ( <menu> ). In menus and unordered lists, list items are usually. 



Three Types of Lists 

1) Unordered List  <ul>
2) Ordered List <ol>
3)Definition List <dl>


1) Unordered List


Unordered List <ul>: This will list items using plain bullets. An unordered list is a collection of elated items that have no special order or sequence. This list is created by using <ul> tag and ends with </ul> tag. Each item in the list is marked with a bullet. You can use type attribute for <ul> tag.


<ul type="square">

<ul type="disc">

<ul type="circle">

Program 

<!Doctype html>
<HTML>
<body>
<h1>  Unordered List</h1>
<ul>
<li>CPU Register</li>
 <li>Cache Memory</li>
<li>Primary Memory</li>
</ul>
<ul type="circle"> 
<li>Hard disk</li>
<li>CD/DVD</li> 
<li>Pend Drive</li>
</ul>
type="square">
<li>RAM</li>
<li>SRAM</li>
<li>DRAM</li>
</body>
</html>


Unordered List Output



Unordered List tag



2) Ordered List


This will use different schemes of numbers to list your items. If you are required to put your items in a numbered list then HTML ordered list will be used. This list is created by using <ol> tag and ends with </ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li> and ends with </li>

Following are the possible options

<ol type="1"> - Default-Case Numbers. 
<ol type="I"> - Upper-Case Roman Numbers.
<ol type="i"> - Lower Case Numbers.
<ol type ="a"> - Lower case Letters.
<ok type= "A"> - Lower Case Letters.


Program 

<! Doctype html>
<HTML>
<body>
<h1> Ordered List</h1>
<ol type="1" start="1">
<li>Water</li>
<li>Food</li>
<li>Water</li>
</ol>
<ol type="A" start="5">
 <li>Students</li>
<li>sanskar</li>
<li>Education</li>
</ol>
<ol type="I" start="5">
<li>Technology</li>
<li>Science</li>
<li>Maths</li>
</0l>
</body>
</html>


Ordered List Output


Ordered List tag

3) Definition  list


Definition List <dl> HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Program 

<!DOCTYPE html>
<html>
<head>
<title> Definition List</title>
</head>
 <body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</d1>
</body>
</html>


Definition List Output


Definition list Tag


Visit This Link
To Your extra information 





Wednesday, October 5, 2022

HTML Table Attribute in html

 

     Table Tag

                                       Attributes 


Html table tag



1) Rowspan Tag 

The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row.


Example

program 

<html>

<body>

<h1>Example of TD Rowspan attribute</h1> <table border="1">

<tr>
<th>Student</th>
<th>Fees Amount</th>
<th>Course</th>
</tr>
<tr>
<td>Manish</td>
<td>700</td>
<td rowspan="2">Java</td>
</tr> <tr>
<td>Puneet</td> <td>800</td>
</tr>
</table>

</body>

</html>

 

Rowspan Tag output

TD Rowspan attribute

2] HTML <td> Colspan Attribute.


Question :-


1] What is the colspan tag in HTML ?
2] What is colspan and rowspan ? 

Information :-

The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as merge cell in a spreadsheet program like Excel.

 

Example

<html>
<body>
<h1>Example of TD colspan attribute</h1> <table border="1">
<tr> <th colspan="2">Student Fees detail</th></tr>
<tr>
<th>Student</th>
<th>Fees Amount</th>
</tr>
<tr>
<td>Manish</td>
<td>1000</td>
</tr>
<tr>
<td>Puneet</td>
<td>2000</td>
</tr>
<tr> <td colspan="2">Total: 3000</td>
</tr>
</table>
</body>
</html>


Colspan Tag output

TD colspan Attribute

3)  Alignment Tag 

The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell. Attribute Value top - It sets the content to top-align. middle -It sets the content to middle-align. Bottom - It sets the content to bottom-align.

1) Example

<! Doctype html>

<html>
<body>
<table  height="300" width="500" Border="2" Bordercolor="red"> 

<caption> Use of Verticle Alignment Attribute of Table</caption> 
<tr>

<td valign="Top">Top Align content</td>
<td valign="Center">Center Align content
</td>
 <td valign="Bottom">Bottom Align content</td> 
</tr>
</table>
</body>
</html>

 Alignment  OUTPUT


Verticle Alignment Tag



2) Example

<! Doctype html>
<html>
<body>
<table bgcolor="yellow" height="300" width="500" Border="2" Bordercolor="red"> 

<caption> Use of Verticle Alignment Attribute of Table</caption> 
<tr>

<td valign="Top">Top Align content
</td>


<td valign="Center">Center Align content
</td>

 <td valign="Bottom">Bottom Align content
</td> 

</tr>
</table>
</body>
</html

Question :- 

1]  How to align text in top HTML?
2] How to align text in center HTML?
3] How to align text in Bottom HTML?


Alignment OUTPUT




Verticle Alignment Tag




Related Post


html table program
css border bottom property
html tag Attributes
html Tag attributes
meta attribute html


Sunday, October 2, 2022

HTML Table Attribute

HTML Tag



Html table tag



 1) Cell width or column width Tag


The <td>width can be set either as an absolute value in pixel, or as in percentage (%)

Program 


<! doctype html>

<html>

<body>

<table border= 1 Width= 400>

<tr>

<td width=30%>

cell width is 30%

</td>

<td width = 70%>

cell width is 70% 

</td></tr>

</table>

</body>

</html>


 Cell width or column width output


Cell width and column width


2) TR Tag 

HTML table

TR(<tr></tr> tag ) stands for Table Row and used to insert rows in the table. Data in html tables are inserted into rows. The basic building blocks of an html  table is the table row. A table row doesn't contain any data directly. the <tr> tag defines a row in a html table and <tr> element contains one or more <th> or <td> element . These <th> and <td> contains the table date.


Organizing Table Rows

Simple tables often consist of a parent <table> element and some table rows. 

<thead> use as a parent container for the row that contains table headings.

<tfoot> use as a parent container for one or more rows that contain summary data about the data in  each table column.

<tbody> use as a parent container for the rows  of data presented in a table.


Attribute 

1) <tr align =""> sets the horizontal alignment for the contents of each <td> element in a table row.

2) <tr valign =""> sets the vertical alignment of all content in a table row.

3) <tr bgcolor="">sets the background color for a single table row in an html.

4) <tr background="">sets the URL of a file to be used as a background images for a table row.

5) <tr bordercolor=""> sets the border color for all inside border of a table row.

Program 

<! Doctype html>
<html>
<body>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
</body>
</html>
 

TD Tag output



Tr Tag




 3) TH Tag

Table heading can be defined using <th> tag.

We use this tag  when we need to write some heading text in table column, so  it replace the <td> tag  with <th>. Normally  you will put your top row as table heading as shown below, so you use <th> element in first row. Heading which are defined in <th> tag are centered align align and bold by default.

 

Program 

<! Doctype html>

<html>

<table border= 2>

<tr>

<th>A </th>

<th>Heading</th>

<th>Row</th></th>

<tr>

<td>The first</td>

<td>row of </td>

<td>table data</td></tr>

</tr>

<td>the second</td>

<td>row of</td>

<td>table date</td>

</td></table>

</html>


TH Tag output

Th Tag output


4) TD Tag

The <td> tag defines a standard cell or column in an html table. This tag must be nested inside a <tr> tag. The information contained in this element is left- aligned by default. We can say that column is necessary for the completion of table in html. There is a one column either <td> or <th> is must even for single row.


Program 

<! Doctype html>

<html>

<body>

<table>

  <tr>

    <td>Cell A</td>

    <td>Cell B</td>

  </tr>

  <tr>

    <td>Cell C</td>

    <td>Cell D</td>

  </tr>

</table>

</body>

</htm>


TD Tag output


TD Tag




Related Post