Jump to content

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


modifiedcontent
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

  • 3 months later...
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. :(

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...