HTML Helper¶

The HTML Helper file contains functions that assist in working with HTML.

Loading this Helper
Available Functions

Loading this Helper ¶

This helper is loaded using the following code:

helper('html');

Available Functions ¶

The following functions are available:

img([$src = ''[, $indexPage = false[, $attributes = '']]])¶

參數:	$src (string\|array) – Image source URI, or array of attributes and values $indexPage (bool) – Whether to treat `$src` as a routed URI string $attributes (mixed) – Additional HTML attributes
傳回:	HTML image tag
傳回型態:	string

Lets you create HTML <img /> tags. The first parameter contains the image source. Example:

echo img('images/picture.jpg');
// <img src="http://site.com/images/picture.jpg" />

There is an optional second parameter that is a true/false value that specifics if the src should have the page specified by $config['indexPage'] added to the address it creates. Presumably, this would be if you were using a media controller:

echo img('images/picture.jpg', true);
// <img src="http://site.com/index.php/images/picture.jpg" alt="" />

Additionally, an associative array can be passed as the first parameter, for complete control over all attributes and values. If an alt attribute is not provided, CodeIgniter will generate an empty string.

Example:

$imageProperties = [
    'src'    => 'images/picture.jpg',
    'alt'    => 'Me, demonstrating how to eat 4 slices of pizza at one time',
    'class'  => 'post_images',
    'width'  => '200',
    'height' => '200',
    'title'  => 'That was quite a night',
    'rel'    => 'lightbox',
];

img($imageProperties);
// <img src="http://site.com/index.php/images/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_images" width="200" height="200" title="That was quite a night" rel="lightbox" />

img_data([$src = ''[, $indexPage = false[, $attributes = '']]])¶

參數:	$path (string) – Path to the image file $mime (string\|null) – MIME type to use, or null to guess
傳回:	base64 encoded binary image string
傳回型態:	string

Generates a src-ready string from an image using the 「data:」 protocol. Example:

$src = img_data('public/images/picture.jpg'); // data:image/jpg;base64,R0lGODl...
echo img($src);

There is an optional second parameter to specify the MIME type, otherwise the function will use your Mimes config to guess:

$src = img_data('path/img_without_extension', 'image/png'); // data:image/png;base64,HT5A822...

Note that $path must exist and be a readable image format supported by the data: protocol. This function is not recommended for very large files, but it provides a convenient way of serving images from your app that are not web-accessible (e.g., in public/).

link_tag([$href = ''[, $rel = 'stylesheet'[, $type = 'text/css'[, $title = ''[, $media = ''[, $indexPage = false[, $hreflang = '']]]]]]])¶

參數:	$href (string) – The source of the link file $rel (string) – Relation type $type (string) – Type of the related document $title (string) – Link title $media (string) – Media type $indexPage (bool) – Whether to treat `$src` as a routed URI string $hreflang (string) – Hreflang type
傳回:	HTML link tag
傳回型態:	string

Lets you create HTML <link /> tags. This is useful for stylesheet links, as well as other links. The parameters are href, with optional rel, type, title, media and indexPage.

indexPage is a boolean value that specifies if the href should have the page specified by $config['indexPage'] added to the address it creates.

Example:

echo link_tag('css/mystyles.css');
// <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" />

Further examples:

echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
// <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />

echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
// <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" />

Alternately, an associative array can be passed to the link_tag() function for complete control over all attributes and values:

$link = [
    'href'  => 'css/printer.css',
    'rel'   => 'stylesheet',
    'type'  => 'text/css',
    'media' => 'print',
];

echo link_tag($link);
// <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" />

script_tag([$src = ''[, $indexPage = false]])¶

參數:	$src (mixed) – The source name of a JavaScript file $indexPage (bool) – Whether to treat `$src` as a routed URI string
傳回:	HTML script tag
傳回型態:	string

Lets you create HTML <script></script> tags. The parameters is src, with optional indexPage.

indexPage is a boolean value that specifies if the src should have the page specified by $config['indexPage'] added to the address it creates.

Example:

echo script_tag('js/mystyles.js');
// <script src="http://site.com/js/mystyles.js" type="text/javascript"></script>

Alternately, an associative array can be passed to the script_tag() function for complete control over all attributes and values:

$script = ['src'  => 'js/printer.js'];

echo script_tag($script);
// <script src="http://site.com/js/printer.js" type="text/javascript"></script>

ul($list[, $attributes = ''])¶

參數:	$list (array) – List entries $attributes (array) – HTML attributes
傳回:	HTML-formatted unordered list
傳回型態:	string

Permits you to generate unordered HTML lists from simple or multi-dimensional arrays. Example:

$list = [
    'red',
    'blue',
    'green',
    'yellow',
];

$attributes = [
    'class' => 'boldlist',
    'id'    => 'mylist',
];

echo ul($list, $attributes);

The above code will produce this:

<ul class="boldlist" id="mylist">
    <li>red</li>
    <li>blue</li>
    <li>green</li>
    <li>yellow</li>
</ul>

Here is a more complex example, using a multi-dimensional array:

$attributes = [
    'class' => 'boldlist',
    'id'    => 'mylist',
];

$list = [
    'colors' => [
        'red',
        'blue',
        'green',
    ],
    'shapes' => [
        'round',
        'square',
        'circles' => [
            'ellipse',
            'oval',
            'sphere',
        ],
    ],
    'moods'  => [
        'happy',
        'upset'   => [
            'defeated' => [
                'dejected',
                'disheartened',
                'depressed',
            ],
            'annoyed',
            'cross',
            'angry',
        ]
    ]
];

echo ul($list, $attributes);

The above code will produce this:

<ul class="boldlist" id="mylist">
    <li>colors
        <ul>
            <li>red</li>
            <li>blue</li>
            <li>green</li>
        </ul>
    </li>
    <li>shapes
        <ul>
            <li>round</li>
            <li>suare</li>
            <li>circles
                <ul>
                    <li>elipse</li>
                    <li>oval</li>
                    <li>sphere</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>moods
        <ul>
            <li>happy</li>
            <li>upset
                <ul>
                    <li>defeated
                        <ul>
                            <li>dejected</li>
                            <li>disheartened</li>
                            <li>depressed</li>
                        </ul>
                    </li>
                    <li>annoyed</li>
                    <li>cross</li>
                    <li>angry</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ol($list, $attributes = '')¶

參數:	$list (array) – List entries $attributes (array) – HTML attributes
傳回:	HTML-formatted ordered list
傳回型態:	string

Identical to ul(), only it produces the <ol> tag for ordered lists instead of <ul>.

video($src[, $unsupportedMessage = ''[, $attributes = ''[, $tracks = [][, $indexPage = false]]]])¶

參數:	$src (mixed) – Either a source string or an array of sources. See `source()` function $unsupportedMessage (string) – The message to display if the media tag is not supported by the browser $attributes (string) – HTML attributes $tracks (array) – Use the track function inside an array. See `track()` function $indexPage (bool) –
傳回:	HTML-formatted video element
傳回型態:	string

Permits you to generate HTML video element from simple or source arrays. Example:

$tracks = [
    track('subtitles_no.vtt', 'subtitles', 'no', 'Norwegian No'),
    track('subtitles_yes.vtt', 'subtitles', 'yes', 'Norwegian Yes')
];

echo video('test.mp4', 'Your browser does not support the video tag.', 'controls');

echo video(
    'http://www.codeigniter.com/test.mp4',
    'Your browser does not support the video tag.',
    'controls',
    $tracks
);

echo video([
    source('movie.mp4', 'video/mp4', 'class="test"'),
    source('movie.ogg', 'video/ogg'),
    source('movie.mov', 'video/quicktime'),
    source('movie.ogv', 'video/ogv; codecs=dirac, speex')
],
    'Your browser does not support the video tag.',
    'class="test" controls',
    $tracks
 );

The above code will produce this:

<video src="test.mp4" controls>
  Your browser does not support the video tag.
</video>

<video src="http://www.codeigniter.com/test.mp4" controls>
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />
  <track src="subtitles_yes.vtt" kind="subtitles" srclang="yes" label="Norwegian Yes" />
  Your browser does not support the video tag.
</video>

<video class="test" controls>
  <source src="movie.mp4" type="video/mp4" class="test" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mov" type="video/quicktime" />
  <source src="movie.ogv" type="video/ogv; codecs=dirac, speex" />
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />
  <track src="subtitles_yes.vtt" kind="subtitles" srclang="yes" label="Norwegian Yes" />
  Your browser does not support the video tag.
</video>

audio($src[, $unsupportedMessage = ''[, $attributes = ''[, $tracks = [][, $indexPage = false]]]])¶

參數:	$src (mixed) – Either a source string or an array of sources. See `source()` function $unsupportedMessage (string) – The message to display if the media tag is not supported by the browser $attributes (string) – $tracks (array) – Use the track function inside an array. See `track()` function $indexPage (bool) –
傳回:	HTML-formatted audio element
傳回型態:	string

Identical to video(), only it produces the <audio> tag instead of <video>.

source($src = ''[, $type = false[, $attributes = '']])¶

參數:	$src (string) – The path of the media resource $type (bool) – The MIME-type of the resource with optional codecs parameters $attributes (array) – HTML attributes
傳回:	HTML source tag
傳回型態:	string

Lets you create HTML <source /> tags. The first parameter contains the source source. Example:

echo source('movie.mp4', 'video/mp4', 'class="test"');
// <source src="movie.mp4" type="video/mp4" class="test" />

embed($src = ''[, $type = false[, $attributes = ''[, $indexPage = false]]])¶

參數:	$src (string) – The path of the resource to embed $type (bool) – MIME-type $attributes (array) – HTML attributes $indexPage (bool) –
傳回:	HTML embed tag
傳回型態:	string

Lets you create HTML <embed /> tags. The first parameter contains the embed source. Example:

echo embed('movie.mov', 'video/quicktime', 'class="test"');
// <embed src="movie.mov" type="video/quicktime" class="test"/>

object($data = ''[, $type = false[, $attributes = '']])¶

參數:	$data (string) – A resource URL $type (bool) – Content-type of the resource $attributes (array) – HTML attributes $params (array) – Use the param function inside an array. See `param()` function
傳回:	HTML object tag
傳回型態:	string

Lets you create HTML <object /> tags. The first parameter contains the object data. Example:

echo object('movie.swf', 'application/x-shockwave-flash', 'class="test"');

echo object(
    'movie.swf',
    'application/x-shockwave-flash',
    'class="test"',
    [
        param('foo', 'bar', 'ref', 'class="test"'),
        param('hello', 'world', 'ref', 'class="test"')
    ]
);

The above code will produce this:

<object data="movie.swf" class="test"></object>

<object data="movie.swf" class="test">
  <param name="foo" type="ref" value="bar" class="test" />
  <param name="hello" type="ref" value="world" class="test" />
</object>

param($name = ''[, $type = false[, $attributes = '']])¶

參數:	$name (string) – The name of the parameter $value (string) – The value of the parameter $attributes (array) – HTML attributes
傳回:	HTML param tag
傳回型態:	string

Lets you create HTML <param /> tags. The first parameter contains the param source. Example:

echo param('movie.mov', 'video/quicktime', 'class="test"');
// <param src="movie.mov" type="video/quicktime" class="test"/>

track($name = ''[, $type = false[, $attributes = '']])¶

參數:	$name (string) – The name of the parameter $value (string) – The value of the parameter $attributes (array) – HTML attributes
傳回:	HTML track tag
傳回型態:	string

Generates a track element to specify timed tracks. The tracks are formatted in WebVTT format. Example:

echo track('subtitles_no.vtt', 'subtitles', 'no', 'Norwegian No');
// <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />

doctype([$type = 'html5'])¶

參數:	$type (string) – Doctype name
傳回:	HTML DocType tag
傳回型態:	string

Helps you generate document type declarations, or DTD’s. HTML 5 is used by default, but many doctypes are available.

Example:

echo doctype();
// <!DOCTYPE html>

echo doctype('html4-trans');
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The following is a list of the pre-defined doctype choices. These are configurable, pulled from app/Config/DocTypes.php, or they could be over-ridden in your .env configuration.

Document type	Option	Result
XHTML 1.1	xhtml11	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.1//EN」「http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd」>
XHTML 1.0 Strict	xhtml1-strict	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Strict//EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd」>
XHTML 1.0 Transitional	xhtml1-trans	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>
XHTML 1.0 Frameset	xhtml1-frame	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Frameset//EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd」>
XHTML Basic 1.1	xhtml-basic11	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML Basic 1.1//EN」「http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd」>
HTML 5	html5	<!DOCTYPE html>
HTML 4 Strict	html4-strict	<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01//EN」「http://www.w3.org/TR/html4/strict.dtd」>
HTML 4 Transitional	html4-trans	<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」「http://www.w3.org/TR/html4/loose.dtd」>
HTML 4 Frameset	html4-frame	<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Frameset//EN」「http://www.w3.org/TR/html4/frameset.dtd」>
MathML 1.01	mathml1	<!DOCTYPE math SYSTEM 「http://www.w3.org/Math/DTD/mathml1/mathml.dtd」>
MathML 2.0	mathml2	<!DOCTYPE math PUBLIC 「-//W3C//DTD MathML 2.0//EN」「http://www.w3.org/Math/DTD/mathml2/mathml2.dtd」>
SVG 1.0	svg10	<!DOCTYPE svg PUBLIC 「-//W3C//DTD SVG 1.0//EN」「http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd」>
SVG 1.1 Full	svg11	<!DOCTYPE svg PUBLIC 「-//W3C//DTD SVG 1.1//EN」「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd」>
SVG 1.1 Basic	svg11-basic	<!DOCTYPE svg PUBLIC 「-//W3C//DTD SVG 1.1 Basic//EN」「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd」>
SVG 1.1 Tiny	svg11-tiny	<!DOCTYPE svg PUBLIC 「-//W3C//DTD SVG 1.1 Tiny//EN」「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd」>
XHTML+MathML+SVG (XHTML host)	xhtml-math-svg-xh	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN」「http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd」>
XHTML+MathML+SVG (SVG host)	xhtml-math-svg-sh	<!DOCTYPE svg:svg PUBLIC 「-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN」「http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd」>
XHTML+RDFa 1.0	xhtml-rdfa-1	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML+RDFa 1.0//EN」「http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd」>
XHTML+RDFa 1.1	xhtml-rdfa-2	<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML+RDFa 1.1//EN」「http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd」>

HTML Helper¶

Loading this Helper¶

Available Functions¶

Loading this Helper ¶

Available Functions ¶