cakePHP display Form elements inline - css

Question

I am trying to display form elements inline built using the cakePHP Form helper. It appears it has to do with the classes it creates around the elements. I am sure this can be fixed with CSS but if there is another way i would rather do it right:
<?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();
?>

Answer 1

By default, CakePHP puts <div>s around inputs. You can either add the 'div'=>false option to each input:
echo $this->Form->input("username",array("label" => false, "div"=>false, "class" => false, "value" => "Username", "class" => "loginCredentials"));
Or, you can set the inputDefaults for the form itself:
echo $this->Form->create('whatever', array(
'inputDefaults'=>array('div'=>'false', 'label'=>false)));

Answer 2

My form has only 4 required fields and is generated by the following view:
<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>
Some explanations:
To add a class to a form tag:
$form->create('User', array('class'=>'form'))
generates:
<form class="form" id="UserAddForm" method="post" action="/kultura/users/add">
To add a class to an input:
echo $form->input('username', array(
'label' => 'Login',
'div'=>'formfield',
'error' => array(
'wrap' => 'div',
'class' => 'formerror'
)
));
generates this:
<div class="formfield required">
<label for="UserUsername">Login</label>
<input name="data[User][username]" type="text" maxlength="20" value="" id="UserUsername" />
</div>
An error in this case will appear in:
<div class=”formerror”></div>
A sample css style may look like this:
.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;
}
The result:

Answer 3

dont get me wrong i think you could try this, which should help aswell
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>'
)
)
);
then you can simply do :
echo $form->input('taskfield_id',
array( 'label'=> array('text' => 'Aufgabenbereich *','class' => 'col-sm-4 col-md-3 control-label'),
'empty'=>'Bitte wählen'
)
);
this will output something like this
<div class="form-group required">
<label for="JobTaskfieldId" class="col-sm-4 col-md-3 control-label">Aufgabenbereich *</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>
now you have a form that will give you always this form of input
<div> <label> </label> <div> <input /> </div> </div>
since i needed to translate some of the labels i need an extea label array for each input which shouldn't be needed if you keep the field names true to your database.
edit:
this is made with bootstrap and cake,
you can also style it yourself since you have full controll of the classes and labels
or without classes
label{float:left;width:25%}
label+div input{float:left;width:75%}

Answer 4

In CakePHP4 I simply added a new CSS file, loaded it after the others, and put the following in it. This overrides the existing display:block in original CSS
label,
legend {
display: inline; //change
font-size: 2.0rem;
/* font-weight: 700; */
/* margin-bottom: 2.0rem */
}