CodeIgniter Forums
Too much code just to output a form - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Too much code just to output a form (/showthread.php?tid=20031)

Pages: 1 2

Too much code just to output a form - El Forum - 06-26-2009

[eluser]xwero[/eluser]
I wonder why people use divs if the form looks like a a paragraphed text? Just use the p tag, the fields will not be shown horizontally.

The problem i have with the ggoforth's example is that fieldset would be better than a div as it is a group of fields.

html5 has all these descriptive tags; nav, article, details. I think it's better to use the most descriptive tag for the job, this creates markup that can read by machines and humans with less guessing how the page is build.

To get back on track the form helpers are meant to use when a cms give its users a bit of wiggle room to change the form to their liking. Otherwise form helpers are indeed a unnecessary layer.

Too much code just to output a form - El Forum - 06-26-2009

[eluser]slowgary[/eluser]
I never looked at it that way xwero. The HTML helpers do indeed make more sense from a dynamically generated point of view.

Too much code just to output a form - El Forum - 06-26-2009

[eluser]garymardell[/eluser]
This http://www.sitepoint.com/article/fancy-form-design-css/ article i found useful for making forms, sure its not the only way, there is divs and paragraphs but seems a good a way as any.

Too much code just to output a form - El Forum - 06-26-2009

[eluser]jayrulez[/eluser]
here's an example of how i build a for using div. its pretty wordy but also formatted pretty good

Code:
<div id="quicksignup-col" class="clearfix">
                    <div id="quicksignup-col-content">
                      <div id="quicksignup">
                        <div id="quicksignup-header">
                          <div id="quicksignup-title">{%signup_title}</div>
                          <div id="quicksignup-subtitle">{%signup_subtitle}</div>
                        </div>
                        &lt;form id="quicksignup-form" action="{:url('','','signup','',array('ajax'=&gt;1))}" method="post">
                          <div id="quicksignup-form-content">
                            <div class="quicksignup-item clearfix">
                              <div class="quicksignup-label">
                                <label for="quicksignup-fullname">{%signup_fullname}</label>
                              </div>
                              <div class="quicksignup-field">
                                &lt;input type="text" name="truename" id="quicksignup-fullname" class="inputtxt" value=""/&gt;
                              </div>
                            </div>
                            <div class="quicksignup-item clearfix">
                              <div class="quicksignup-label">
                                <label for="quicksignup-email">{%signup_email}</label>
                              </div>
                              <div class="quicksignup-field">
                                &lt;input type="text" name="email" id="quicksignup-email" class="inputtxt" value=""/&gt;
                              </div>
                            </div>
                            <div class="quicksignup-item clearfix">
                              <div class="quicksignup-label">
                                <label for="quicksignup-password">{%signup_password}</label>
                              </div>
                              <div class="quicksignup-field">
                                &lt;input type="password" name="password" id="quicksignup-password" class="inputpwd" value=""/&gt;
                              </div>
                            </div>
                            <div class="quicksignup-item clearfix">
                              <div class="quicksignup-label">
                                <label for="quicksignup-gender">{%signup_gender}</label>
                              </div>
                              <div class="quicksignup-field">
                                <select name="gender" id="quicksignup-gender">
                                  <option value="0">{%signup_gender_select}</option>
                                  <option value="1">{%signup_gender_male}</option>
                                  <option value="2">{%signup_gender_female}</option>
                                </select>
                              </div>
                            </div>
                            <div class="quicksignup-item clearfix">
                              <div class="quicksignup-label">
                                <label for="quicksignup-birthday-month">{%signup_birthday}</label>
                              </div>
                              <div class="quicksignup-field">
                                <select name="birthday_month" id="quicksignup-birthday-month">
                                  <option value="00">{%signup_birthday_month}</option>
                                  &lt;!--<volist name="monthList" id="month">--&gt;
                                  <option value="{$month.id}">{$month.name}</option>
                                  &lt;!--</volist>--&gt;
                                </select>
                                <select name="birthday_day" id="quicksignup-birthday-day">
                                  <option value="00">{%signup_birthday_day}</option>
                                  &lt;!--<volist name="dayList" id="day">--&gt;
                                  <option value="{$day.id}">{$day.id}</option>
                                  &lt;!--</volist>--&gt;
                                </select>
                                <select name="birthday_year" id="quicksignup-birthday-year">
                                  <option value="00">{%signup_birthday_year}</option>
                                  &lt;!--<volist name="yearList" id="year">--&gt;
                                  <option value="{$year.id}">{$year.id}</option>
                                  &lt;!--</volist>--&gt;
                                </select>
                              </div>
                            </div>
                            <div class="quicksignup-item last clearfix">
                              <div class="quicksignup-label">
                                <label>&nbsp;</label>
                              </div>
                              <div class="quicksignup-field">
                                &lt;input type="submit" class="inputsubmit-b" id="quicksignup-submit"&gt;
                              </div>
                            </div>
                          </div>
                          <div id="quicksignup-form-captcha">
                            captcha div
                          </div>
                        &lt;/form&gt;
                        <div id="quicksignup-process" class="process">
                        </div>
                        <div id="quicksignup-error" class="error">
                        </div>
                      </div>
                    </div>
                  </div>


Too much code just to output a form - El Forum - 06-26-2009

[eluser]jayrulez[/eluser]
and it needs this css to show up properly
Code:
a,body,br,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,hr,img,input,label,legend,li,p,ul,table,tr,th,td,p,span{margin:0px;padding:0px;}
body{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;color:#333333;background-color:#ffffff;text-align:center;font-size:11px;}
a{cursor:pointer;-moz-outline-style:none;text-decoration:none;color:#3b5998;}
a:hover{text-decoration:underline;}
input,select{font-size:11px;color:#333333;}
select{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;border:solid 1px #d8dfea;padding:1px;}
label{cursor:pointer;}
.clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix{display:block;}
.clear {clear:both;}
.en-us{}
.form-token{display:none;}

._tinymce{width:100%;height:320px;}

.error{padding:10px;border: 2px solid #ddd;background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4;display:none;text-align:center;}
.notice,.process{padding:10px;border: 2px solid #ddd;background: #FFF6BF; color: #514721; border-color: #FFD324;display:none;text-align:center;}
.success{padding:10px;border: 2px solid #ddd;background: #E6EFC2; color: #264409; border-color: #C6D880;display:none;text-align:center;}
.error a{color: #8a1f11;}
.notice a, .process a{color: #514721;}
.success a{color: #264409;}

/* IE */
body.ie6, body.ie7 {text-align:center;}
.ie6 .clearfix,.ie7 .clearfix {display:inline-block;}
.ie6 .clearfix{height:1%;}

.inputsubmit-a{cursor:pointer;padding:2px 10px 3px 10px;background:#3b5998;border:solid 1px #224488;color:#ffffff;font-weight:bold;display:inline-block;}
.inputsubmit-b{cursor:pointer;padding:2px 10px 3px 10px;background:#66aa44;border:solid 1px #558844;color:#ffffff;font-weight:bold;display:inline-block;}
#welcome #welcome-body #welcome-body-content #quicksignup-col{float:right;width:380px;background:#f0f5f8;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content{padding:20px;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup{}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-header{}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-header #quicksignup-title{font-size:15px;font-weight:bold;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-header #quicksignup-subtitle{margin:5px 0px;font-size:13px;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form{}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content{}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item{margin-bottom:5px;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .last{margin-bottom:0px;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item .quicksignup-label{margin-top:3px;float:left;width:110px;text-align:right;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item .quicksignup-field{float:right;width:225px;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item .quicksignup-field .inputtxt,
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item .quicksignup-field .inputpwd{width:217px;padding:3px;height:12px;border:solid 1px #d8dfea;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item .quicksignup-field #quicksignup-submit{margin:5px 0px 0px 0px;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-captcha{display:none;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-process{margin-top:20px;}
#welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-error{margin-top:20px;}

/*IE6*/
.ie6 #welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item .quicksignup-field .inputtxt,
.ie6 #welcome #welcome-body #welcome-body-content #quicksignup-col #quicksignup-col-content #quicksignup #quicksignup-form #quicksignup-form-content .quicksignup-item .quicksignup-field .inputpwd{width:225px;padding:3px;height:20px;border:solid 1px #d8dfea;}

of course you've gotta start wrapping from the #welcome.

screenshot: http://favefaces.com/ff_dev.png

Too much code just to output a form - El Forum - 06-27-2009

[eluser]dopple[/eluser]
Sorry for being absent for a while and not thanking you guys for the replies. I'll stick to manually typing out the html.
Cheers lads and/or lasses