feat(web): add form type

This commit is contained in:
Baoshuo Ren 2022-03-17 19:35:43 +08:00
parent 71a82c3a28
commit 3964f64c14
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
3 changed files with 67 additions and 1 deletions

View File

@ -35,6 +35,7 @@
$change_realname_form->runAtServer();
$user_form = new UOJForm('user');
$user_form->submit_button_config['align'] = 'compressed';
$user_form->addInput('username', 'text', '用户名', '',
function ($username) {
if (!validateUsername($username)) {

View File

@ -392,7 +392,19 @@ EOD
public function printHTML() {
$form_entype_str = $this->is_big ? ' enctype="multipart/form-data"' : '';
echo '<form action="', $_SERVER['REQUEST_URI'], '" method="post" class="form-horizontal" id="form-', $this->form_name, '"', $form_entype_str, '>';
$form_class = "form-horizontal";
if ($this->submit_button_config['align'] == 'inline') {
$form_class .= " uoj-form-inline";
}
if ($this->submit_button_config['align'] == 'compressed') {
$form_class .= " uoj-form-compressed";
}
if (isset($this->submit_button_config['narrow']) && $this->submit_button_config['narrow']) {
$form_class .= " uoj-form-narrow";
}
echo '<form action="', $_SERVER['REQUEST_URI'], '" method="post" class="', $form_class, '" id="form-', $this->form_name, '"', $form_entype_str, '>';
echo HTML::hiddenToken();
echo $this->main_html;

View File

@ -393,3 +393,56 @@ pre {
padding-left:10px;
text-align:left;
}
form.uoj-form-inline {
display: inline-block;
margin-right: 0.3em;
}
form.uoj-form-narrow label.col-sm-2 {
max-width: 100% !important;
padding: 0 !important;
}
form.uoj-form-narrow div.col-sm-3 {
max-width: 100% !important;
padding: 0 !important;
}
form.form-horizontal {
margin-bottom: 8px;
}
form.uoj-form-compressed {
margin: 12px 0;
}
form.uoj-form-compressed div.form-group {
display: inline-block;
width: 24em;
}
form.uoj-form-compressed div.form-group label.col-sm-2 {
display: inline-block;
max-width: 100%;
width: 6em;
padding: 0;
}
form.uoj-form-compressed div.form-group div.col-sm-3 {
display: inline-block;
max-width: 100%;
width: 16em;
}
form.uoj-form-compressed div.text-center,
form.uoj-form-compressed div.text-compressed,
form.uoj-form-compressed button {
display: inline-block;
}
form.uoj-form-compressed button {
position: relative;
top: -6px;
}