Codeigniter tutorial

Codeigniter Form Tutorial for Beginners Part 3

Views: 508

In previous tutorial we learned about field sets, text areas, password fields and check boxes with codeigniter’s inbuilt form functions, in this tutorial we will learn about other form UI elements like codeigniter’s radio, select, multi select, submit and reset functions.

If you have missed the previous codeigniter’s form tutorials you can visit the following tutorial parts:

Codeigniter Form Tutorial for Beginners Part 1

Codeigniter Form Tutorial for Beginners Part 2

So let’s begin.

tutorial-for-creating-fieldset-and-legends-with-codeigniter-form_fieldset

Codeigniter Form Radio, Select, Multi Select, Submit and Reset Tutorial for Beginners

Tutorial for Creating Radio Buttons with Codeigniter’s “form_radio()” function

The codeigniter’s form_radio() function allows us to create radio button for our forms, the form_radio() supports four parameters to be passed.

  • Data: This is the element’s attributes such as id, class etc., and is an array.
  • Value: This is value for the radio button and is string.
  • Checked: This is Boolean value either true or false, true for checked and false for unchecked.
  • Extra: This field allows extra attributes for the radio button, it can be either string or array.
  • Usage:

Usage:

$radio=array(

‘class’=>’radio’,

‘id’=>’radio’,

‘name’=>’radio’,

‘value’=>’The Radio’,

‘checked’=>’checked’

);

echo form_radio($radio);

HTML Mark-up:

<input type=”radio” name=”radio” value=”The Radio” checked=”checked” class=”radio” id=”radio”/>

Tutorial for Creating Select with Codeigniter’s “form_dropdown()” function

The select field is also a very important UI element, this is used in many scenarios, codeigniter has a built in function form_dropdown() to create our drop down select list with ease. The form_dropdown() function supports four parameters:

  • Data: Can be an array or string, the attributes for select elements are passed in this.
  • Options: This is set of array for select options, the key is option value and value is option text.
  • Selected: This is for the option which will be marked as selected, the value can be either string or an array.
  • Extra: Extra allows additional attributes added to the select element.

Usage:

$option=array('0'=>'Select', 'male'=>'Male', 'female'=>'Female');

$selected='female';

$select=array(

'class'=>'select',

'id'=>'select',

'name'=>'select',

);

echo form_dropdown($select, $option, $selected);

HTML Mark-up:

<select class=”select” id=”select” name=”select”> <option value=”0″>Select</option> <option value=”male”>Male</option> <option value=”female” selected=”selected”>Female</option> </select>

 

Tutorial for Creating Multi Select with Codeigniter’s “form_multiselect()” function

The multi select element allows to select multiple options from a list of values, this is handy when we want our users to select multiple options and our list is long, think of 100 check boxes on a page!! Messy right? So at this moment we will love if something more manageable element is available, in such cases we mostly use multi select fields, codeigniter’s form_multiselect allows us to add a multi select option element to our forms. The form_multiselect() function supports four parameters

  • Data: Can be an array or string, the attributes for multi select elements are passed in this.
  • Options: This is set of array for multi select options, the key is option value and value is option text.
  • Selected: This is for the option which will be marked as selected, and is an array.
  • Extra: Extra allows additional attributes added to the multi select element.

 

Usage:

$option=array('0'=>'Select', 'wine'=>'Wine', 'beer'=>'Beer','coffee'=>'Coffee', 'tea'=>'Tea', 'green_tea'=>'Green Tea');

$selected=array('tea','coffee','wine');

$multiselect=array(

'class'=>'multiselect',

'id'=>'multiselect',

'name'=>'multiselect',

);

HTML Mark-up:

<select class="select" id="select" name="select"  multiple="multiple">

<option value="0">Select</option>

<option value="wine" selected="selected">Wine</option>

<option value="beer">Beer</option>

<option value="coffee" selected="selected">Coffee</option>

<option value="tea" selected="selected">Tea</option>

<option value="green_tea">Green Tea</option>

</select>

Tutorial for Creating Submit Button with Codeigniter’s “form_submit()” function

Any form is worthless if there is no submit button added to it, you will not able to get the form inputs, hence cannot store or process, codeigniter’s form_submit() function allows us to add a submit button in our forms. The form_submit() function accepts three parameters

  • Data: Can be an array or string, the attributes for the submit button.
  • Value: This is value of the submit button and is a string.
  • Extra: Extra allows additional attributes added to the submit button.

Usage:

$submit=array(

'class'=>'btn btn-default',

'id'=>'submit',

'name'=>'submit'

);

echo form_submit($submit, 'submit');

Output:

<input type="submit" name="submit" value="submit" class="btn btn-default" id="submit"/>

Tutorial for Creating Reset Button with Codeigniter’s “form_reset()” function

Another UI element is the reset button of our forms, the reset button allows us to reset our form to its original state, codeigniter’s form_reset() function allows us to add a reset button in our forms, the form_reset() function supports three paremeters

  • Data: Can be an array or string, the attributes for the reset button are passed with this.
  • Value: This sets the value for reset button and is string type.
  • Extra: Extra allows additional attributes added to the reset button.

Usage:

$reset=array(

‘class’=>’btn btn-warning’,

‘id’=>’reset’,

‘name’=>’reset’

);

echo form_reset($reset, ‘reset’);

Output:

<input type=”reset” name=”reset” value=”reset” class=”btn btn-warning” id=”reset”/>

 

That’s all for this part of codeigniter’s form tutorial, in next part we will learn how we can add hidden, file upload button, form error messages and other useful codeigniter’s form functions. The sample file is attached below you can download to review the codes.

sample files

Codeigniter Form Tutorial for Beginners Part 4

Output:

Codeigniter Form Radio, Select, Multi Select, Submit and Reset Tutorial for Beginners

If you liked this part of codeigniter form tutorial then share with your friends, if you have any questions in mind or any suggestion let me know in comments below.

Comments: 1

Your email address will not be published. Required fields are marked with *