Saturday, October 29, 2022

HTML File Upload

HTML Tag

1]File Upload Tag

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

File Tag program

 <html>

<body>

<h1>File upload</h1>

 <p>Show  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>

HTML File Upload

Explain Program

Step 1 ]

<html>

root element of an HTML document.
All HTML content must placed inside tag.

Step 2]

<body>

html Contains all visible content of the webpage.
Text, forms, images, and everything users interact inside the <body>.

Step 3]

<h1>File upload</h1>

HTML TAG heading element.
<h1> tag largest and most important heading used as the title of the page or section.
Text: "File upload" – page is about.

Step 4]

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

<p> defines a paragraph.
This gives a brief description of what the user can do on the page: choose a file for uploading.

Step 5]

<form> is used to create an HTML form for user input.

Step 6]

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

input line creates the actual file selection field.
<input> is the most common form element for user input.

Step 7]

<br><br>

These are line breaks.
Each <br> moves the next content to a new line.

Step 8]

<input type="submit">

A submit button.

Step 9]

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

These are closing tags for the elements opened earlier.
They mark the end of the form, body, and HTML document.

file Tag Output

Reset Tag

Reset tag isA button that resets the contents of the form to default values.

Checkbox Tag

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

Wednesday, October 26, 2022

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 tag equired to the take input from to the user who visit the websiteThis form is primarily used for the registration process, creating a profile on a website, or logging into an existing one, etc. Name, password, and other details are among the data gathered from the form. At this point, the form will receive input and post the information to backend applications. Thus, the data that they receive will be processed by the backend programme.There are various form element such as 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) form - Get Method : - It has a limited length of the characters URL. we should not be use get to send some sensitive data. This method is better for non-secure data.

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

3) Target :-

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

Form Tag program

<!Doctype html>

<html>

<Body>

<form>

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

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

</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 to the 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>

<br>

Last name:<br>

</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>

User password :<br>

</form>

</body>

</html>

Input type output

Attribute Description

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

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

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

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

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

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

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

Thursday, October 6, 2022

html List attributes tag

List Tag

Lists Tag

List tag method that HTML 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 heading text starts with <li> and ends with </li>. list tag writing any list item, it must to specify the list type.list tag three types of lists you can use.

A list tag is a record of short pieces of related information or used to display data or any information on web pages.

The <li> tag HTML element is use to the represent item in list. list tag It must be contained in a parent element an ordered list ( <ol> )tag an unordered list ( <ul> ), or a menu ( <menu> ). list tag In menus and unordered lists items are usually.

Three Types of Lists

1) Unordered List <ul>

2) Ordered List <ol>

3)Definition List <dl>

1) Unordered List

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

Program

<!Doctype html>

<HTML>

<body>

<h1> Unordered List</h1>

<ul>

<li>CPU Register</li>

<li>Cache Memory</li>

<li>Primary Memory</li>

</ul>

<li>Pend Drive</li>

</ul>

type="square">

</body>

</html>

Unordered List Output

2) Ordered List

order list schemes different of numbers list your item. If you are require to put your item in numbered of list then HTML ordered list will be used. This list is create by using <ol> tag and ends with </ol> tag. The numbering start at one and incremented by the one for each successive ordered list element tagged with <li> tag 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>

<li>Water</li>

<li>Water</li>

</ol>

<li>Students</li>

<li>sanskar</li>

<li>Education</li>

</ol>

<li>Technology</li>

<li>Science</li>

<li>Maths</li>

</0l>

</body>

</html>

Ordered List Output

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. definition list ideal way present glossary list of terms, or other name value list.

Program

<!DOCTYPE html>

<html>

<head>

<title> Definition List</title>

</head>

<body>

<dl>

<dd>This stands for Hyper Text Markup

Language</dd>

<dd>This stands for Hyper Text Transfer

Protocol</dd>

</d1>

</body>

</html>

Definition List Output

Wednesday, October 5, 2022

HTML Table Attribute in html

Table Tag Attributes

1) Rowspan Tag

The <tr> tag in HTML stands for "table row" and is used to define a row in a table. It is placed inside a <table> element and typically contains one or more <td> (table data) or <th> (table header) elements. Each <tr> represents a single row of data or headers in the table. Rows can be styled using CSS, and can also work with rowspan and colspan attributes inside cells to span across row or columns for better layout control.

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

2] HTML <td> Colspan Attribute.

Question :-

1] What is the colspan tag in HTML ?

2] What is colspan and rowspan ?

Information :-

The colspan attribute HTML specifies the number of columns and cell should span. colspan allows to the single table cell span the width of more than one cell ,column. It's provides the same functionality as merge cell in 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

2) Example

<! Doctype html>

<html>

<body>

<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

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

1) Cell width or column width Tag

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

Program

<! doctype html>

<html>

<body>

<tr>

cell width is 30%

</td>

cell width is 70%

</td></tr>

</table>

</body>

</html>

Cell width or column width output

2) TR Tag

HTML table

TR ( tag) represents a Table Row and is utilized to add rows to the table. Data HTML tables are placed into rows. The fundamental components of an HTML table are the table rows. A table's rows do not have any data directly. TR tag HTML specifies a row within a table and the element includes one or multiple or elements. These and hold the table information. Arranged Table Row Basic tables typically include a parent componentalong with several table row. serves as a parent element for the row that includes table headers. servesas a parent container forone or more rows that include summary information regarding the data in each column ofthe table. serves as a parent element for the data rows display in a table.

1) determines the horizontal alignment for the content within each defines the vertical alignment for all elementswithin a table row.

2) bgcolor=" "> defines the background color for an individual table row in an html.

3) specifies the URL of a file to be utilized as a background image for a table row.

4) specifies the border color for everyinner border of a table row element of a table row.

Program

<! Doctype html>

<html>

<body>

<table>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

</body>

</html>

TD Tag output

3) TH Tag

The tag can be used to define table headings. The TH tag is utilized when we want to include heading text within a table column, thereby replacing the tag with . TH TAG will designate your top row as the table header as illustrated below, thus you utilize the element in the first row. TH TAG headings defined within the tag are bold and centered by default

Program

<! Doctype html>

<html>

<tr>

<th>Heading</th>

<tr>

<td>The first</td>

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

</tr>

<td>the second</td>

<td>table date</td>

</td></table>

</html>

TH Tag output

4) TD Tag

The TD TAG element specifies a regular cell or column within an HTML table. This tag needs to be placed within a tag. The information in the TD TAG indicates that this element is left-aligned by default. It can be stated that a column is essential for finishing a table in HTML

Program

<! Doctype html>

<html>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</htm>

ad

Saturday, October 29, 2022

File Tag program

HTML File Upload

Explain Program

Step 1 ]

Step 2]

Step 3]

Step 4]

Step 5]

Step 6]

Step 7]

Step 8]

Step 9]

file Tag Output

Checkbox Tag

Related Post :-

Wednesday, October 26, 2022

Form Tag

Attributes

1) Action :-

Form Tag output

Form Type

1) Input Type

1) <input type = "text">

Program

Input Type output

2) <input type="password">

Program

Input type output

Attribute Description

Related Post:-

Thursday, October 6, 2022

List Tag

Lists Tag

1) Unordered List

Program

Unordered List Output

2) Ordered List

Ordered List Output

3) Definition list

Program

Definition List Output

Related Post :-

Wednesday, October 5, 2022

Table Tag Attributes

1) Rowspan Tag

Example

program

Rowspan Tag output

2] HTML <td> Colspan Attribute.

Question :-

Information :-

Example

Colspan Tag output

2) Example

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

Related Post

Sunday, October 2, 2022

HTML Tag

1) Cell width or column width Tag

Cell width or column width output

2) TR Tag

Program

TD Tag output

3) TH Tag

TH Tag output

4) TD Tag

Program

TD Tag output

Related Post :-

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