Could forms API use cleaner html markup instead of lists - ul, li?

[modifiedcontent]

Why does the forms API use lists - ul, li - to style forms? It makes them much harder to control with CSS.

Why not something like this?

<style>
.field {
float: left;
width: 100%;
}

.inputfieldheader {
float: left;
width: 100%;
}

.input {
float: left;
}
</style>

<form>
<div class=field>
      <label class=inputfieldheader>Field one</label>
      <input class=input>
</div>
<div class=field>
      <label class=inputfieldheader>Field two</label>
      <input class=input>
</div>
<div class=field>
      <label class=inputfieldheader>Field three</label>
      <input class=input>
</div>
</form>

 

[LostKobrakai]

I see various reasons for that:

• The forms API was always only a tool for the admin backend (and a bit for form builder), and therefore never really meant to be greatly restyleable, but with the recent addition of styling possibilities via form builder this did even improve a great deal.
• In the backend forms are essentially a (more or less long) list of inputfields.
• The markup does need to fulfill all the need the backend does throw at it, meaning it does not only need to hold various types of single / multi-value inputs, but also the title, description notes and some kind of collapsing method. That's just more than the run of the mill css framework markup does offer.

[apeisa]

You can customize the markup when using Form API. Use these methods:

https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/InputfieldWrapper.php#L887 (markup)

https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/InputfieldWrapper.php#L907 (classes)

 

And here are the defaults:

https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/InputfieldWrapper.php#L34 (markup)

https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/InputfieldWrapper.php#L56 (classes)

[szabesz]

more links on changing the markup:

 

[pwFoo]

On 18.9.2016 at 9:25 PM, modifiedcontent said:

Why does the forms API use lists - ul, li - to style forms? It makes them much harder to control with CSS.

Why not something like this?

<style>
.field {
float: left;
width: 100%;
}

.inputfieldheader {
float: left;
width: 100%;
}

.input {
float: left;
}
</style>

<form>
<div class=field>
      <label class=inputfieldheader>Field one</label>
      <input class=input>
</div>
<div class=field>
      <label class=inputfieldheader>Field two</label>
      <input class=input>
</div>
<div class=field>
      <label class=inputfieldheader>Field three</label>
      <input class=input>
</div>
</form>

 

 

Order of input and label should be changed because of css seletor based on checkbox state (checked / unchecked) like this.

input[type=checkbox]:checked + label:before {}

I used this markup to get font awesome and css styled checkboxes work.

<div class=field>
  <input class=input>
  <label class=inputfieldheader>Field three</label>
</div>

 

It would be awesome if modules like inputfields and form api would be written for frontend usage, but it's optimized for admin backend use only.