README

轻量级的 PHP 类，用于生成 HTML 元素。

除了 php-5.4 以外，此包没有其他依赖项。

许可证：MIT

要求

PHP 5.4.0 或更高版本

安装

Composer

Composer 是一个广泛使用的 PHP 包依赖管理器。Html-Form 在 Packagist 上作为 user-meta/html 提供，可以通过运行 composer require 命令来安装。要为项目启用 Composer，请参阅项目的入门文档。

要从命令行添加此依赖项，请在项目目录中运行以下命令

composer require user-meta/html

入门

使用 composer 通过 Html-Form 生成文本输入的快速示例

<?php
require __DIR__ . '/vendor/autoload.php';
use UserMeta\Html\Html;
echo Html::text('example');

输出

<input type="text" value="example"/>

几乎所有类型的 HTML 元素都可以使用。（例如：按钮、电子邮件、div、p 等）

echo Html::button('Submit Me');
echo Html::email('example email');
echo Html::div('example text');
echo Html::p('example text');

输出

<input type="button" value="Submit Me"/>
<input type="email" value="example email"/>
<div>example text</div>
<p>example text</p>

用法

基本用法

接受的参数

大多数元素接受两个参数

$default : 默认值
$attributes : 属性数组
echo Html::text($default, attributes);

对于选项元素（如选择、单选），它接受第三个参数 $options

$options: 选项数组。数组可以包含键值对或仅包含值
echo Html::select($default, attributes, $options);

使用名称、id 和类

要分配名称、id、类或其他属性，请使用第二个参数（$attributes）

具有默认值、名称、id 和类属性的文本字段

echo Html::text('Example_Value', ['name' => 'Example_Name', 'id' => 'Example_ID', 'class' => 'Example_Class']);

输出

<input type="text" name="Example_Name" value="Example_Value" id="Example_ID" class="Example_Class"/>

向元素添加属性

您还可以向任何元素添加任何属性

echo Html::text('Example_Value', ['name' => 'Example_Name', 'data-example' => 'Example_Data']);

输出

<input type="text" name="Example_Name" value="Example_Value" data-example="Example_Data"/>

使用 required、readonly 和 disabled

echo Html::email(null, ['name' => 'Email', 'required']);
echo Html::email(null, ['name' => 'Email', 'readonly']);
echo Html::email(null, ['name' => 'Email', 'disabled']);

输出

<input type="email" name="Email" required="required"/>
<input type="email" name="Email" readonly="readonly"/>
<input type="email" name="Email" disabled="disabled"/>

使用标签

echo Html::email(null, [
    'name' => 'Example_Name',
    'label' => 'Email'
]);

echo Html::email(null, [
    'name' => 'Example_Name',
    'label' => [
        'Example',
        'class' => 'Class'
    ]
]);

输出

<label>Email</label>
<input type="email" name="Example_Name"/>

<label class="Class">Example</label>
<input type="email" name="Example_Name"/>

具有 id 和类属性的 div

echo Html::div('example text', ['id' => 'Example_ID', 'class' => 'Example_Class']);

输出

<div id="Example_ID" class="Example_Class">example text</div>

具有标签文本、id、类和 for 属性的标签

echo Html::label('Some text', ['id' => 'ID', 'class' => 'Class', 'for' => 'For']);

输出

<label id="ID" class="Class" for="For">Some text</label>

使用复选框

默认选中状态的简单复选框

echo Html::checkbox(true, ['name' => 'Name']);
echo Html::checkbox(true, ['name' => 'Name', 'value' => 'Value']);

输出

<input type="checkbox" name="Name" value="1" checked="checked"/>
<input type="checkbox" name="Name" value="Value" checked="checked"/>

将第一个参数传递为 false 以使默认值未选中。 echo Html::checkbox(false)

复选框列表

创建具有默认值的复选框列表

echo Html::checkbox('cat', ['name' => 'Name', 'id' => 'ID'], ['dog' => 'Dog', 'cat' => 'Cat']);
echo Html::checkbox(['cat'], ['name' => 'Name', 'id' => 'ID'], ['dog' => 'Dog', 'cat' => 'Cat']);

输出

<label><input type="checkbox" value="dog" name="Name" id="ID_1"/> Dog</label>
<label><input type="checkbox" value="cat" name="Name" id="ID_2" checked="checked"/> Cat</label>

通过 POST 或 GET 方法获取值数组

echo Html::checkbox(['cat'], ['name' => 'Name[]', 'id' => 'ID'], ['dog' => 'Dog', 'cat' => 'Cat']);

输出

<label><input type="checkbox" value="dog" name="Name[]" id="ID_1"/> Dog</label>
<label><input type="checkbox" value="cat" name="Name[]" id="ID_2" checked="checked"/> Cat</label>

使用选择/单选

创建具有默认值、名称和 id 属性的选择

echo Html::select(['cat'], ['name' => 'Name'], ['dog' => 'Dog', 'cat' => 'Cat']);
echo Html::select(['cat'], ['name' => 'Name'], ['dog', 'cat']);

输出

<select name="Name">
    <option value="dog">Dog</option>
    <option value="cat" selected="selected">Cat</option>
</select>

<select name="Name">
    <option value="dog">dog</option>
    <option value="cat" selected="selected">cat</option>
</select>

创建单选按钮列表

echo Html::radio(['cat'], ['name' => 'Name', 'id' => 'ID'], ['dog', 'cat']);

输出

<label><input type="radio" value="dog" name="Name" id="ID_1"/> dog</label>
<label><input type="radio" value="cat" name="Name" id="ID_2" checked="checked"/> cat</label>

使用集合

几个元素可以作为集合一起分组

$div = new Html('div');
$div->p('Hello World');
$div->text('example');
$div->add('Some plain text');
echo $div->render();

输出

<div>
    <p>Hello World</p>
    <input type="text" value="example"/>
    Some plain text
</div>

集合使用 Html 构造函数，并接受两个参数。

$type (可选): 标签名。（例如：表单、div）
$attributes (可选): 属性数组

表单示例

使用集合生成表单

$form = new Html('form', ['method' => 'POST']);
$form->div('Enter your email and password for login');
$form->email('', ['name' => 'email', 'label' => 'Email']);
$form->password('', ['name' => 'password', 'label' => 'Password']);
$form->submit('login');
echo $form->render();

输出

<form method="POST">
    <div>Enter your email and password for login</div>
    <label>Email</label>
    <input type="email" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
    <input type="submit" value="login"/>
</form>

嵌套集合

使用嵌套集合生成 HTML 模板

$html = new Html('html');
$head = $html->import('head');
$head->title('Example Title');
$body = $html->import('body');
$body->p('Hello World');
echo $html->render();

<html>
    <head>
        <title>Example Title</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

作为 XML 生成器使用

$book = new Html('book');
$book->title('The Da Vinci Code');
$author = $book->import('author');
$author->name('Dan Brown');
$author->nationality('American');
echo $book->render();

输出

<book>
    <title>The Da Vinci Code</title>
    <author>
        <name>Dan Brown</name>
        <nationality>American</nationality>
    </author>
</book>

高级

通过调用其名称，可以创建任何 HTML 元素。

echo Html::email('noreply@gmail.com');
echo Html::h1('Example Heading');

在底层，我们使用 Html::input() 用于输入元素和 Html::tag() 用于 HTML 标签

使用 input 方法创建电子邮件输入

echo Html::input('email', 'noreply@gmail.com');

使用 tag 方法创建 h1

echo Html::tag('h1', 'Example Heading');

向元素前后添加 HTML

echo Html::email('', ['_before' => 'Before', '_after' => 'After']);

输出

Before<input type="email"/>After

用另一个元素包裹

echo Html::email('', ['_enclose' => 'div']);
echo Html::email('', ['_enclose' => ['div', 'class' => 'Class']]);

输出

<div>
    <input type="email"/>
</div>
<div class="Class">
    <input type="email"/>
</div>

设置选择/多选/单选/复选框选项的几种方式

// Same value and label
echo Html::select(null, [], ['audi', 'bmw']);

// Different value and label
echo Html::select(null, [], ['audi' => 'Audi', 'bmw' => 'BMW']);

// Option with extra attributes
echo Html::select(null, [], ['ferrari' => ['Ferrari', 'data-origin' => 'Italy']]);
echo Html::select(null, [], [['value' => 'ferrari', 'label' => 'Ferrari', 'data-origin' => 'Italy']]);

输出

<select><option value="audi">audi</option><option value="bmw">bmw</option></select>
<select><option value="audi">Audi</option><option value="bmw">BMW</option></select>
<select><option value="ferrari" data-origin="Italy">Ferrari</option></select>
<select><option value="ferrari" data-origin="Italy">Ferrari</option></select>

将几种方式与一个选项数组混合使用

echo Html::select(null, [], [
    'audi',
    'bmw' => 'BMW',
    'honda' => [
        'Honda',
        'data-origin' => 'Japan'
    ],
    [
        'value' => 'ferrari',
        'label' => 'Ferrari',
        'data-origin' => 'Italy'
    ]
]);

输出

<select>
    <option value="audi">audi</option>
    <option value="bmw">BMW</option>
    <option value="honda" data-origin="Japan">Honda</option>
    <option value="ferrari" data-origin="Italy">Ferrari</option>
</select>

使用数值

echo Html::select(null, [], [2 => 'Two', 4 => 'Four']);

输出

<select>
    <option value="2">Two</option>
    <option value="4">Four</option>
</select>

安全性

转义输出

转义意味着删除不需要的数据，如格式错误的 HTML 或脚本标签。

该库将 esc_attr 应用于值属性。将 esc_url 应用于 href 和 src 属性。

user-meta / html

维护者

详细信息