Minimize CSS ( custom.widget) statements for custom styled forms

37 views
Skip to first unread message

Shubham Rathi

unread,
Sep 14, 2014, 7:09:47 AM9/14/14
to web...@googlegroups.com
The following is a controller in web2py:

#####Sign-in/Sign-up page#####
def signup():
    form = SQLFORM(db.auth_user)
    return dict(form=form)

def signin():
    if auth.is_logged_in():
      redirect(URL(r=request, c='default', f="index"))
    login_form = auth.login()
    login_form["_class"] = "form-horizontal"
    login_form.custom.widget.username["_class"]="input-medium"
    login_form.custom.widget.password["_class"]="input-medium"
    login_form.custom.widget.username["_placeholder"]="E-mail/Username"
    login_form.custom.widget.password["_placeholder"]="Password"
    login_form.custom.submit["_style"] = "color:white; background-color:#193161;"
    login_form.custom.submit["_class"] = "btn btn-primary text-center"
    
    signup_form = auth.register()
    signup_form.custom.widget.first_name["_class"]="input-medium"
    signup_form.custom.widget.last_name["_class"]="input-medium"
    signup_form.custom.widget.username["_class"]="input-medium"
    signup_form.custom.widget.email["_class"]="input-medium"
    signup_form.custom.widget.password["_class"]="input-medium"
    signup_form.custom.widget.password_two["_class"]="input-medium"
    
    signup_form.custom.widget.first_name["_placeholder"]="First Name"
    signup_form.custom.widget.last_name["_placeholder"]="Last Name"
    signup_form.custom.widget.username["_placeholder"]="User Name"
    signup_form.custom.widget.email["_placeholder"]="E-Mail"
    signup_form.custom.widget.password["_placeholder"]="Password"
    signup_form.custom.widget.password_two["_placeholder"]="Verify Password"
    
    signup_form.custom.submit["_style"] = "color:white; background-color:#193161;"
    signup_form.custom.submit["_class"] = "btn btn-primary text-center"
    return dict(login_form=login_form,signup_form=signup_form)

The corresponding webpage is here: http://tuneterrain.com/tuneterrain/default/signin/login

The backend developer wants to reduce the number of statements that he has to write to retain the form formatting I have done with CSS.
The formatting for most of the forms on the website is same; could there be a way to add uniform formatting without having to write so many statements?

I am looking for a way, any way by which these statements could be minimised.

Yeah, statements for placeholders:
signup_form.custom.widget.last_name["_placeholder"]="Last Name

Bootstrap classes:
signup_form.custom.widget.email["_class"]="input-medium"
Can perhaps not be eliminated. But say this:
signup_form.custom.submit["_style"] = "color:white; background-color:#193161;"
Could such statements be reduced? What would I have to do with CSS or web2py that such statements are minimally written again and again for forms.

Leonel Câmara

unread,
Sep 17, 2014, 12:34:22 PM9/17/14
to web...@googlegroups.com
That code is a huge WTF.

None of this should be in the controller, it should be in the view. There should be no need to use _style. Why aren't you using the 'bootstrap3_stacked' (or inline) formstyle to start with or just using your own custom made formstyle?

Furthermore, placeholders can be passed directly to the fields widget or you can make them automatically from the labels using something like this:

def label2placeholder(form):
    for label in form.elements('label'):
        input = form.element('#%s' % label['_for'])
        if input:
            input['_placeholder'] = label.components[0]
Reply all
Reply to author
Forward
0 new messages