2

私は、cakePHPフォームヘルパーを使用して構築されたフォーム要素をインラインで表示しようとしています。要素の周りに作成するクラスに関係しているようです。これはCSSで修正できると確信していますが、別の方法がある場合は、正しく実行したいと思います。

<?php
            echo $this->Form->create("users");
            echo $this->Form->input("username",array("label" => false, "class" => false, "value" => "Username", "class" => "loginCredentials"));
            echo $this->Form->input("password",array("label" => false, "class" => false, "value" => "Password", "class" => "loginCredentials"));
            echo $this->Form->input("loginBtn",array("label" => false, "class" => false, "value" => "LOGIN", "class" => "loginCredentials", "type" => "submit"));
            echo $this->Form->end();
            ?>
4

4 に答える 4

5

デフォルトでは、CakePHPは<div>入力の周りにsを置きます。'div'=>false各入力にオプションを追加することができます。

echo $this->Form->input("username",array("label" => false, "div"=>false, "class" => false, "value" => "Username", "class" => "loginCredentials"));

または、フォーム自体にinputDefaultsを設定できます。

echo $this->Form->create('whatever', array(
    'inputDefaults'=>array('div'=>'false', 'label'=>false)));
于 2012-05-06T19:12:35.203 に答える
0

私のフォームには4つの必須フィールドしかなく、次のビューによって生成されます。

<div class="users form"> 
<?php echo $form->create('User', array('class'=>'form'));?>
<p class="formtitle">Sign Up</p>
<fieldset>
    <legend class="formtitle">Please complete the form below.</legend>
    <?php
        echo $form->input('username',  array(
            'label' => 'Login',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror'
                )
            ));
        echo $form->input('password',  array(
            'label' => 'Password',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror'
                )
            ));
        echo $form->input('password_confirm', array(
            'label' => 'Confirm password',
            'type'=>'password',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror'
                )
            ));
        echo $form->input('name',  array(
            'label' => 'Name',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror'
                )
            ));
        echo $form->input('surname',  array(
            'label' => 'Surname',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror'
                )
            ));
        echo $form->input('email',  array(
            'label' => 'E-mail',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror'
                )
            ));
        echo $form->input('city_id',  array(
            'label' => 'City',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror')));
    ?>
</fieldset>  
<?php echo $form->end('Submit');?>
</div>

いくつかの説明：

フォームタグにクラスを追加するには： 

$form->create('User', array('class'=>'form'))
generates:


<form class="form" id="UserAddForm" method="post" action="/kultura/users/add">

入力にクラスを追加するには：

echo $form->input('username',  array(
            'label' => 'Login',
            'div'=>'formfield',
            'error' => array(
                'wrap' => 'div',
                'class' => 'formerror'
                )
            ));

これを生成します：

<div class="formfield required">
<label for="UserUsername">Login</label>
<input name="data[User][username]" type="text" maxlength="20" value="" id="UserUsername" />
</div>

この場合のエラーは次のように表示されます。

<div class=”formerror”&gt;</div>

サンプルのcssスタイルは次のようになります。

.form{
    font-family: Verdana;   
    font-size:1em;
    margin:1em;
    padding:1em;   
}

.form p.formtitle{
    color: #026475;
    font-size:1.3em;
    font-weight: bold;
}

.form fieldset{
    width:40em;
    border:1px solid #FFE545;  
    background-image: url(../img/Contact.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}

.form fieldset legend{
    color: #026475;
}

.formfield{
    width:30em;
    padding:5px;
}

.formfield label{
    display:block;
    float:left;
    width:12em;
    padding:1px;
    color:#C2A34F;
    text-align:right;
}

.formfield input, .formfield  select{
    padding:0.15em;
    width:14em;
    border:1px solid #ddd;
    background:#FEFBAF;

    font-family: Verdana;   
    font-size:1em;

    -moz-border-radius:0.4em;
    -khtml-border-radius:0.4em;
}

.formfield input:hover, input:focus {
    border-color:#c5c5c5;
    background:#f6f6f6;
}

.required input {
    border:1px solid #FBB829;
}

.form .submit input{
    font-family: Verdana;   
    font-size:1em;
    margin-top: 0.3em;
}

.formerror{
    position:relative;
    left:12.1em;
    color:#FBB829;
}

結果：

ここに画像の説明を入力してください

于 2013-12-31T05:52:22.710 に答える
0

私を誤解しないでください私はあなたがこれを試すことができると思います、それは同様に役立つはずです

echo $form->create('Job',
        array(  'type'=>'file',
                'class' => 'form-horizontal',
                'inputDefaults' => array(
                    'div' => array('class' => 'form-group'),
                    //needs to be redefined due to restrictions of the text element we need to define for each input..
                    'label' => array('class' => 'col-sm-4 col-md-3 control-label'),
                    'class' => 'form-control',
                    'between' => '<div class="col-sm-8 col-md-9">',
                    'after' => '</div>'
                )
        )
    );

その後、あなたは簡単に行うことができます：

echo $form->input('taskfield_id',
        array(  'label'=> array('text' => 'Aufgabenbereich&nbsp;*','class' => 'col-sm-4 col-md-3 control-label'),
                'empty'=>'Bitte wählen'
        )
    );

これはこのようなものを出力します

<div class="form-group required">
    <label for="JobTaskfieldId" class="col-sm-4 col-md-3 control-label">Aufgabenbereich&nbsp;*</label>
    <div class="col-sm-8 col-md-9">
        <select name="data[Job][taskfield_id]" class="form-control" id="JobTaskfieldId">
            <option value="">Bitte wählen</option>
        </select>
    </div>
</div>

これで、常にこの形式の入力を提供するフォームができました

<div> <label> </label> <div> <input /> </div> </div>

いくつかのラベルを翻訳する必要があったので、入力ごとにexteaラベル配列が必要です。これは、フィールド名をデータベースに忠実に保つ場合は必要ありません。

編集：これはブートストラップとケーキで作られています。クラスとラベルを完全に制御できるため、またはクラスなしで自分でスタイルを設定することもできます

label{float:left;width:25%}
label+div input{float:left;width:75%}
于 2014-11-18T15:54:20.590 に答える
0

CakePHP4では、新しいCSSファイルを追加し、他のファイルの後にロードして、次のファイルを追加しました。これは、元のCSSの既存のdisplay：blockをオーバーライドします

label,
legend {
    display: inline; //change
    font-size: 2.0rem;
    /* font-weight: 700; */
    /* margin-bottom: 2.0rem */
}
于 2021-07-15T09:26:44.380 に答える