ad

Saturday, October 29, 2022

HTML File Upload

HTML File Upload            

https://webdesigningtheory.blogspot.com


       HTML Tag 




1]File Upload Tag


<input type="file">

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>


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

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

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

<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>
<input type="password" name="password">
</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"
 


Related Post:-

css box property

html list attribute tag

background color program

Thursday, October 6, 2022

HTML List Tag Tutorial

how to use html ul,ol, li tag with example

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>

Wednesday, October 5, 2022

HTML Table Attribute in html

https://webdesigningtheory.blogspot.com/

                                
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

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

TD colspan Attribute


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 Tag

web designing theory
HTML Tag



web designing theory


 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>

<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 ( 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>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
</body>
</html>
 

TD Tag output



Tr Tag web designing theory




 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>

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

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

html form pattern attribute

html frame tag

css table property