How can I convert it to the display as mm/dd/yy H:M (AM/PM) using PHP?

I have a datetime column in MySQL.

 

If you’re looking for a way to normalize a date into MySQL format, use the following

$phpdate = strtotime( $mysqldate );
$mysqldate = date( 'Y-m-d H:i:s', $phpdate );

The line $phpdate = strtotime( $mysqldate ) accepts a string and performs a series of heuristics to turn that string into a unix timestamp.

The line $mysqldate = date( 'Y-m-d H:i:s', $phpdate ) uses that timestamp and PHP’s date function to turn that timestamp back into MySQL’s standard date format.

 

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

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

Text Fields

The <input type="text"> defines a single-line input field for text input.

A form with input fields for text:

<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname”>
</form>

The <label> Element

Notice the use of the <label> element in the example above.

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

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) – because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.


Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

A form with radio buttons:

<form>
<input type=”radio” id=”male” name=”gender” value=”male”>
<label for=”male”>Male</label><br>
<input type=”radio” id=”female” name=”gender” value=”female”>
<label for=”female”>Female</label><br>
<input type=”radio” id=”other” name=”gender” value=”other”>
<label for=”other”>Other</label>
</form>

This is how the HTML code above will be displayed in a browser:

 
 
 


Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

A form with checkboxes:

<form>
<input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike”>
<label for=”vehicle1″> I have a bike</label><br>
<input type=”checkbox” id=”vehicle2″ name=”vehicle2″ value=”Car”>
<label for=”vehicle2″> I have a car</label><br>
<input type=”checkbox” id=”vehicle3″ name=”vehicle3″ value=”Boat”>
<label for=”vehicle3″> I have a boat</label>
</form>

This is how the HTML code above will be displayed in a browser:

 
 
 


The Submit Button

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

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

A form with a submit button:

<form action=”/action_page.php”>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Submit”>
</form>

 

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

This example will not submit the value of the “First name” input field:

<form action=”/action_page.php”>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” value=”John”><br><br>
<input type=”submit” value=”Submit”>
</form>

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.


Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name “myHeader”. This <h1> element will be styled according to the #myHeader style definition in the head section:

 

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>

<h1 id=”myHeader”>My Header</h1>

</body>
</html>

 

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

 

<style>
/* Style the element with the id “myHeader” */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Style all elements with the class name “city” */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<!– An element with a unique id –>
<h1 id=”myHeader”>My Cities</h1>

<!– Multiple elements with same class –>
<h2 class=”city”>Santiago</h2>
<p>Santiago is the capital of Chile.</p>

<h2 class=”city”>México DF</h2>
<p>México DF is the capital of Chile.</p>

<h2 class=”city”>Buenos Aires</h2>
<p>Buenos Aires is the capital of Argentina.</p>

 

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

 

<h2 id=”C4″>Chapter 4</h2>

Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:

<a href=”#C4″>Jump to Chapter 4</a>

Or, add a link to the bookmark (“Jump to Chapter 4”), from another page:

<a href=”html_demo.html#C4″>Jump to Chapter 4</a>

Using The id Attribute in JavaScript

The id attribute can also be used by JavaScript to perform some tasks for that specific element.

JavaScript can access an element with a specific id with the getElementById() method:

Use the id attribute to manipulate text with JavaScript:

<script>
function displayResult() {
document.getElementById(“myHeader”).innerHTML = “Have a nice day!”;
}
</script>

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.


Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of “city”. All of the three <div> elements will be styled equally according to the .city style definition in the head section:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 3px solid black;
margin: 30px;
padding: 30px;
}
</style>
</head>
<body><div class=”city”>
<h2>Santiago</h2>
<p>Santiago is the capital of Chile.</p>
</div><div class=”city”>
<h2>México DF</h2>
<p>México DF is the capital of México.</p>
</div>

<div class=”city”>
<h2>Buenos Aires</h2>
<p>Buenos Aires is the capital of Argentina.</p>
</div>

</body>
</html>

In the following example we have two <span> elements with a class attribute with the value of “note”. Both <span> elements will be styled equally according to the .note style definition in the head section:

<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 10%;
color: green;
}
</style>
</head>
<body>

<h1>This <span class=”note”>is my</span> Heading</h1>
<p>This is <span class=”note”>my important</span> paragraph.</p>

</body>
</html>

 

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

 

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: gray;
padding: 12px;
}
</style>
</head>
<body>

<h2 class=”city”>Santiago</h2>
<p>Santiago is the capital of Chile.</p>

<h2 class=”city”>México</h2>
<p>México DF is the capital of México.</p>

<h2 class=”city”>Buenos Aires</h2>
<p>Buenos Aires is the capital of Argentina.</p>

</body>
</html>

 

In the following example we have two <span> elements with a class attribute with the value of “note”. Both <span> elements will be styled equally according to the .note style definition in the head section:

<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 10%;
color: green;
}
</style>
</head>
<body><h1>This  <span class=”note”>is my</span> Heading</h1>
<p>This is <span class=”note”>my important</span> paragraph.</p>

</body>
</html>

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: gray;
padding: 12px;
}
</style>
</head>
<body>
<h2 class=”city”>Santiago</h2>
<p>Santiago is the capital of Chile.</p>

<h2 class=”city”>México</h2>
<p>México DF is the capital of México.</p>

<h2 class=”city”>Buenos Aires</h2>
<p>Buenos Aires is the capital of Argentina.</p>

</body>
</html>

Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class=”city main”>. The element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

<h2 class=”city main”>Santiago</h2>
<h2 class=”city”>México DF</h2>
<h2 class=”city”>Buenos Aires</h2>

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> points to the “city” class and will share the same style:

<h2 class=”city”>Santiago</h2>
<p class=”city”>Santiago is the capital of Chile</p>

 

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

<script>
function myFunction() {
var x = document.getElementsByClassName(“city”);
for (var i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
}
</script>

HTML Block and Inline Elements Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.


Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.
<div>Hello World</div>
<address> <div> <footer> <main> <section>
<article> <dl> <form> <nav> <table>
<aside> <dt> <h1>-<h6> <noscript> <tfoot>
<blockquote> <fieldset> <header> <ol> <ul>
<canvas> <figcaption> <hr> <p> <video>
<dd> <figure> <li> <pre>

 

 

 

Inline Elements

An inline element does not start on a new line and it only takes up as much width as necessary.

This is a <span> element inside a paragraph.

<span>Hello World</span>
<a> <big> <dfn> <kbd> <q> <span> <time>
<abbr> <br> <em> <label> <samp> <strong> <tt>
<acronym> <button> <i> <map> <script> <sub> <var>
<b> <cite> <img> <object> <select> <sup>
<bdo> <code> <input> <output> <small> <textarea>

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but styleclass and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

<div style=”background-color:black;color:white;padding:20px;”>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but styleclass and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

<p>My mother has <span style=”color:blue;font-weight:bold”>blue</span> eyes and my father has <span style=”color:darkolivegreen;font-weight:bold”>dark green</span> eyes.</p>

HTML lists allow web developers to group a set of related items in lists.

HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

<dl>
<dt>Coffee</dt>
<dd>– black hot drink</dd>
<dt>Milk</dt>
<dd>– white cold drink</dd>
</dl>

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

 

HTML Table – Add a Border

To add a border to a table, use the CSS border property:

table, th, td {
border: 1px solid black;
}

 

HTML Table – Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

HTML Table – Add Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

th, td {
padding: 15px;
}

HTML Table – Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

th {
text-align: left;
}

HTML Table – Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

table {
border-spacing: 5px;
}

HTML Table – Cell that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

HTML Table – Cell that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

HTML Table – Add a Caption

To add a caption to a table, use the <caption> tag:

<table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

<table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Now you can define a special style for this table:

#t01 {
width: 100%;
background-color: #f1f1c1;
}
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
color: white;
background-color: black;
}

Images can improve the design and the appearance of a web page.

<img src=”pic_arnold.jpg” alt=”The Gobernator”>
<img src=”img_fonsi.jpg” alt=”Des pa cito!”>
<img src=”img_alexis.jpg” alt=”Chile Champion!”>

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

  • src – Specifies the path to the image
  • alt – Specifies an alternate text for the image
<img src=”url alt=”alternatetext>

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

<img src=”img_alexis.jpg” alt=”Chile Champion!”>

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

<img src=”img_alexis.jpg” alt=”Chile Champion!”>

If a browser cannot find an image, it will display the value of the alt attribute:

<img src=”alexis.gif” alt=”Chile Champion!”>

Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.

<img src=”pic_arnold.jpg” alt=”The Gobernator” style=”width:500px;height:600px;”>

Alternatively, you can use the width and height attributes:

<imgsrc=”pic_arnold.jpg” alt=”The Gobernator”  width=”500″ height=”600″>

The width and height attributes always define the width and height of the image in pixels.


Width and Height, or Style?

The widthheight, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>

<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

</body>
</html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

<img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

 

Images on Another Server/Website

Some web sites points to an external image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

<img src=”https://www.eenternet.com/images/eenternet.jpg” alt=”eenternet.com”>

 

Animated Images

HTML allows animated GIFs:

<img src=”programming.gif” alt=”MR Robot” style=”width:48px;height:48px;”>

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

<a href=”default.asp”>
<img src=”smile.gif” alt=”HTML tutorial” style=”width:42px;height:42px;”>
</a>

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

<p><img src=”smile.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
The image will float to the right of the text.</p>

<p><img src=”smile.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
The image will float to the left of the text.</p>

Links are found in nearly all web pages. Links allow users to click their way from page to page.


HTML Links – Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links – Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href=”url>link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

<a href=”https://www.eenternet.com/”>Visit eenternet.com!</a>

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

HTML Links – The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self – Default. Opens the document in the same window/tab as it was clicked
  • _blank – Opens the document in a new window or tab
  • _parent – Opens the document in the parent frame
  • _top – Opens the document in the full body of the window

Use target=”_blank” to open the linked document in a new browser window or tab:

<a href=”https://www.eenternet.com/” target=”_blank”>Visit eenternet!</a>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part):

<h2>Absolute URLs</h2>
<p><a href=”https://www.w3.org/”>W3C</a></p>
<p><a href=”https://www.google.com/”>Google</a></p>

<h2>Relative URLs</h2>
<p><a href=”html_images.asp”>HTML Images</a></p>
<p><a href=”/css/”>CSS Tutorial</a></p>

HTML Links – Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

<a href=”default.asp”>
<img src=”smile.gif” alt=”HTML tutorial” style=”width:42px;height:42px;”>
</a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

<a href=”mailto:larry@google.com”>Send email</a>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

<button onclick=”document.location=’default.html'”>HTML Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

<a href=”https://www.eenternet.com/html/” title=”Go to eenternet HTML section”>Visit our HTML Tutorial</a>

More on Absolute URLs and Relative URLs

Example

Use a full URL to link to a web page:

<a href=”https://www.eenternet.com/html/”>HTML tutorial</a>

Link to a page located in the html folder on the current web site:

<a href=”/html/”>HTML tutorial</a>

Link to a page located in the same folder as the current page:

<a href=”default.html”>HTML tutorial</a>