how to set radio button in codeigniter??

Question

anmol.raghuvanshi1

9 Years Ago

hello,everyone i am making a registration page baesed upon php,codeigniter diificulity i am facing was when i try to make radio button or dropdown it misbehaves radio button's are not in single line but in different line so any one can help????

//my registration page
<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <title>Registeration</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700'>
        <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="../../css/Registeraton.css">
        <link rel="stylesheet" href="../../css/bootstrap-responsive.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Custom style -->
        <style>
        .colorgraph {
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
</style>
    </head>

    <body>

        <div class="header">
            <div class="container">
                <div class="row">
                    <div class="logo span4">
                        <h1><a href="">Koopanda <span class="red">.</span></a></h1>
                    </div>
                    <div class="links span8">
                        <a class="home" href="" rel="tooltip" data-placement="bottom" data-original-title="Home"></a>
                        <a class="blog" href="" rel="tooltip" data-placement="bottom" data-original-title="Blog"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="register-container container">
            <div class="row">
                <div class="iphone span5">
                    <img src="../../assets/img/iphone.png" alt="">
                </div>
                <div class="register span6">
                        <?=form_open(base_url()."Register")?>                    
                        <h2>REGISTER TO <span class="red"><strong>Koopanda</strong></span></h2>
                        <label for="name">Name</label>
                     <!--   <input type="text" id="firstname" name="firstname" placeholder="enter your name..."> -->
                        <?=form_input(array("name"=>"name","value"=>set_value("name"),"placeholder"=>"name"))?>
                        <?=form_error("name")?>

                        <label for="username">Username</label>
                    <!--    <input type="text" id="username" name="username" placeholder="UserName">-->
                        <?=form_input(array("name"=>"username","value"=>set_value("username"),"placeholder"=>"UserName"))?>
                        <?=form_error("username")?>

                        <label for="password">Password</label>
                     <!--   <input type="text" id="username" name="username" placeholder="choose a Country...">-->
                        <?=form_password(array("name"=>"password","placeholder"=>"Password"))?>
                        <?=form_error("password")?>

                        <label for="Confirm Password">Renter Password</label>
                   <!-- <input type="text" id="email" name="email" placeholder="enter your email...">-->                        
                        <?=form_password(array("name"=>"pass_conf","placeholder"=>"Renter Password"))?>
                        <?=form_error("pass_conf")?>


                        <label for="email">Email</label>
                        <?=form_input(array("name"=>"email","value"=>set_value("email"),"placeholder"=>"Email-Id"))?>
                        <?=form_error("email")?>

                       <label for="Phone">Phone Number</label>
                     <!--   <input type="password" id="password" name="conf_password" placeholder="choose a password...">-->
                        <?=form_input(array("name"=>"phone","value"=>set_value("phone"),"placeholder"=>"Phone Number"))?>
                        <?=form_error("phone")?>

                        <label for="me">About Me:</label>
                        <!--<input type="password" id="password" name="conf_password" placeholder="">-->
                        <?=form_input(array("name"=>"me","value"=>set_value("me"),"placeholder"=>""))?>
                        <?=form_error("")?>

                        <label for="activities">My Favorite travel activities:</label>
                        <!--<input type="password" id="password" name="conf_password" placeholder="">-->
                        <?=form_input(array("name"=>"activity","value"=>set_value("activity"),"placeholder"=>""))?>
                        <?=form_error("")?>

                        <label for="country">Countries I have Visited:</label>
                        <!--<input type="password" id="password" name="conf_password" placeholder="">-->
                        <?=form_input(array("name"=>"country","value"=>set_value("country"),"placeholder"=>""))?>
                        <?=form_error("")?>

                        <h3>Couch Address</h3>
                        <label for="couch_address">Couch Address Line 1:</label>
                        <!--<input type="password" id="password" name="conf_password" placeholder="">-->
                        <?=form_input(array("name"=>"couch_address","value"=>set_value("address"),"placeholder"=>"Full Address"))?>
                        <?=form_error("")?>
                        <label for="couch_address2">Couch Address Line 2:</label>
                        <!--<input type="password" id="password" name="conf_password" placeholder="">-->
                        <?=form_input(array("name"=>"couch_address2","value"=>set_value("address2"),"placeholder"=>"Full Address"))?>
                        <?=form_error("")?>

                        <!--<label for="sex">Gender:</label>
                        <fieldset>
                             <div class="radio">
                                <?php /*?> <?php echo form_radio('sex', '1', FALSE); ?><?php echo form_label('Male', 'sex');?>
                                 <?php echo form_radio('sex', '2', FALSE); ?><?php echo form_label('Female', 'sex');?><?php */?>

                     </div>
                  </fieldset>-->
                  <div class="col-xs-8 col-sm-9 col-md-9">
                     By clicking <strong class="label label-primary">Register</strong>, you agree to the <a href="#" data-toggle="modal" data-target="#t_and_c_m">Terms and Conditions</a> set out by this site, including our Cookie Use.      
                </div>
                <hr class="colorgraph">
                <div class="row">
                <div class="col-xs-12 col-md-6">       
                <?=form_submit(array("name"=>"submit","value"=>"Register","id"=>"register","class"=>"btn btn-primary btn-block btn-lg"))?>
                 </div></div>
                    <?=form_close()?>
                </div>
            </div>
            <!-- Modal -->
            <!-- for terms and conditions -->
    <div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
                <h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4>
            </div>
            <div class="modal-body">
                <p>All Terms and Conditions</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">I Agree</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
        </div>

        <!-- Javascript -->
        <script src="../../assets/js/jquery-1.8.2.min.js"></script>
        <script src="../../assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="../../assets/js/jquery.backstretch.min.js"></script>
        <script src="../../assets/js/scripts.js"></script>

    </body>

</html>




//css i am using

/*
 *
 * Template Name: Fullscreen Responsive Register Form
 * Author: Anmol Raghuvanshi
 * 
 *
 */


body {
    background: #f8f8f8;
    text-align: left;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    color: #555;
    font-size: 16px;
    font-weight: 400;
}

strong { font-weight: 700; }
.red { color: #eb4141; }
a:hover { text-decoration: none; }

.header {
    margin: 0 auto;
    padding-bottom: 5px;
    background: #f8f8f8 url(../img/pattern.jpg) left top repeat;
    border-top: 3px solid #eb4141;
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
}

.logo h1 {
    padding-left: 50px;
    font-family: 'Oleo Script', cursive;
    font-size: 36px;
    font-weight: 400;
}

.logo h1 a { color: #555; }

.links {
    text-align: right;
}

.links a {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 15px 0 0 20px;
}

.links a.home { background: url(../img/home.png) center center no-repeat; }
.links a.blog { background: url(../img/blog.png) center center no-repeat; margin-right: 50px; }

.register-container {
    margin-top: 50px;
}

/* ----- iPhone ----- */

.iphone {
    text-align: right;
}

.iphone img { margin-right: 10px; }

/* ----- Registration Form ----- */

.register form {
    padding: 20px 50px 40px 50px;
    background: #f8f8f8 url(../img/pattern.jpg) left top repeat;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
    text-align: center;
}

.register form h2 {
    margin-bottom: 25px;
    padding-bottom: 15px;
    background: url(../img/pencil.png) 20px 6px no-repeat;
    border-bottom: 2px dotted #bbb;
    font-size: 30px;
    font-weight: 400;
    text-align: center;
}

.register form input {
    width: 95%;
    height: 30px;
    background: #fcfcfc;
    border: 1px solid #ddd;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    color: #888;
    font-size: 16px;
}

.register form input:focus {
    border: 1px solid #ccc;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.register form label {
    margin: 7px 0 10px 5px;
    font-size: 16px;
    text-align: left;
}

.register form label span {
    font-style: italic;
}

.register form input:-moz-placeholder { color: #aaa; }
.register form input:-ms-input-placeholder { color: #aaa; }
.register form input::-webkit-input-placeholder { color: #aaa; }

.register form button {
    cursor: pointer;
    width: 60%;
    height: 42px;
    margin-top: 25px;
    padding: 0;
    background: #eb4141;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 0;
    -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset;
    -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset;
    box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
}

.register form button:hover {
    -moz-box-shadow: 0 -15px 30px 0 rgba(255,255,255,.05) inset;
    -webkit-box-shadow: 0 -15px 30px 0 rgba(255,255,255,.05) inset;
    box-shadow: 0 -15px 30px 0 rgba(255,255,255,.05) inset;
}

.register form button:active {
    -moz-box-shadow:
        0 -15px 30px 0 rgba(255,255,255,.05) inset,       
        0 5px 8px 0 rgba(0,0,0,.1) inset;
    -webkit-box-shadow:
        0 -15px 30px 0 rgba(255,255,255,.05) inset,       
        0 5px 8px 0 rgba(0,0,0,.1) inset;
    box-shadow:
        0 -15px 30px 0 rgba(255,255,255,.05) inset,       
        0 5px 8px 0 rgba(0,0,0,.1) inset;
}


/* ----- Media queries ----- */

@media (max-width: 1200px) {

    .register form h2 { background: url(../img/pencil.png) 20px 6px no-repeat; }

}

@media (min-width: 768px) and (max-width: 979px) {

    .register form h2 { background: none; }

}

@media (max-width: 767px) {

    body { padding-left: 0; padding-right: 0; }

    .logo, .links { text-align: center; }

    .links { padding-bottom: 5px; }

    .logo h1 { padding-left: 0; }

    .links a.home { margin-left: 0; }

    .links a.blog { margin-right: 0; }

    .register-container { padding-left: 20px; padding-right: 20px; }

    .register form h2 { background: none; }

    .iphone img { display: none; }

}

@media (max-width: 480px) {

    .register form button { width: 97%; }

}


<!--fieldset { overflow:hidden }
<!--.radio{ float:left; clear:none; width:auto; display:inline. }
<!--.label { float:left; clear:none; display:block; padding: 2px 1em 0 0; }
<!--.input[type=radio], input.radio { float:left; clear:none; margin: 2px 0 0 2px; }

codeigniter gui html-css php

2 Contributors
3 Replies
12K Views
4 Hours Discussion Span
Latest Post 9 Years Ago Latest Post by cereal

cereal 1,524 Nearly a Senior Poster

9 Years Ago

Hi,

which version are you using? With version 3 you can use set_checkbox() instead of set_value(). In this case write something like:

<label for="sex_1">
    <?php echo form_radio('sex', 1, set_checkbox('sex', 1), "id='sex_1'"); ?> male
</label>

<label for="sex_2">
    <?php echo form_radio('sex', 2, set_checkbox('sex', 2), "id='sex_2'"); ?> female
</label>

Docs: http://www.codeigniter.com/user_guide/helpers/form_helper.html#set_checkbox

Edited 9 Years Ago by cereal

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

anmol.raghuvanshi1 · Answer 1 · 2015-07-24T12:01:55+00:00

i am using CI 3 using above doesn't solved my problem these check boxes are appear in different line

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 2 · 2015-07-24T15:06:22+00:00

Uh, sorry, due to chosen forum and title I thought it was related to the framework, not to the CSS rules.

It happens probably because of this rule:

.register form input {
    width: 95%;
    height: 30px;
    background: #fcfcfc;
    border: 1px solid #ddd;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    color: #888;
    font-size: 16px;
}

use input[type=text] to match only text inputs and occasionally add types like password, number, email. Otherwise use not(), for example to avoid only radio buttons do:

input:not([type=radio])

To include also checkboxes assign a class to these input fields and then use not on the class, for example:

<input type="radio" name="abc" value="1" class="input_check_radio">
<input type="radio" name="abc" value="2" class="input_check_radio">

<input type="checkbox" name="def" value="alpha" class="input_check_radio">

And for the rule:

input:not(.input_check_radio)

Live example: http://jsfiddle.net/ptu3wv3s/