Home > Zend_Form > Zend_Formのデザイン例

Zend_Formのデザイン例

intro
デモサイトを作成した際に指定したデザイン要素についてです。画面イメージはデモサイトから確認できます。

1.サブミットボタンのスタイル指定
以下のようにZend_Formのサブミット要素にスタイルクラスを指定しました。

<?php
    $decorators = array(
        'ViewHelper',
        array('HtmlTag', array('tag' => 'dt', 'class' => 'submit'))
    );
    $submit = $form->createElement('submit', 'submit');
    $submit->setDecorators($decorators);
2.スタイルシートの作成
以下のようにフォームに対してスタイルを指定しました。

// ....
#content dl {
	width: 500px;
}
#content dt {
	width: 150px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	padding-top: 0.2em;
	margin: 0;
}
#content dd {
	border-bottom: 1px dashed #ccc;
	margin-top: -1.25em;
	margin-left: 150px;
	padding: 0;
}
#content form dl {
	margin-top: 1em;
}
#content form dt {
	border: 0;
}
#content form dd {
	border: 0;
}
#content .submit {
	width: 150px;
	float: left;
	text-align: center;
	margin-top: 10px;
}
// ...
3.多言語
日本語と英語での表示に対応しています。ブラウザの言語設定を変更すると表示される言語が変わります。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.oplabo.jp/article/31/trackback
Listed below are links to weblogs that reference
Zend_Formのデザイン例 from Open Programming Laboratory

Home > Zend_Form > Zend_Formのデザイン例

English
Search
Feeds

Return to page top