使用 PHP、CSS、CodeIgniter 和 Bootstrap 的联系表单答案

【问题标题】：Contact Form using PHP, CSS, CodeIgniter and Bootstrap使用 PHP、CSS、CodeIgniter 和 Bootstrap 的联系表单
【发布时间】：2013-08-21 20:44:22
【问题描述】：

我正在使用带有 Bootstrap 样式的 CodeIgniter 来构建一个具有联系页面的网站。

我无法对 PHP/Form Helper 构建的文本字段进行样式化，因为我不确定在哪里使用标签，我尝试过的每个解决方案都会导致额外的文本字段，或者只是插件出现了，或者什么都没有。

控制器：

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     *      http://example.com/index.php/welcome
     *  - or -  
     *      http://example.com/index.php/welcome/index
     *  - or -
     * Since this controller is set as the default controller in 
     * config/routes.php, it's displayed at http://example.com/
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/welcome/<method_name>
     * @see http://codeigniter.com/user_guide/general/urls.html
     */

    protected   $sendEmailTo    =   'you@you.com'
    protected   $subjectLine    =   ""; // actually set on line 39.

    // views
    protected   $formView       =   'contact';
    protected   $successView    =   'contact_success';
    protected   $headerView     =   ''; //null to disable
    protected   $footerView     =   ''; //null to disable

    // other
    public      $data           =   array(); // used for the views


        public function contact()
    {

        $this->load->library('form_validation');
        $this->load->helper('url');
        $this->subjectLine = "Contact form response from " . $_SERVER['HTTP_HOST'];
        $this->form_validation->set_rules('name', 'Your name', 'trim|required');
        $this->form_validation->set_rules('email', 'Your Email', 'trim|required|valid_email');
        $this->form_validation->set_rules('message', 'Message', 'trim|required|xss_clean');

        if($this->form_validation->run() == FALSE) {
            // show the form

            if ($this->headerView) { $this->load->view($this->headerView,$this->data); }
            $this->load->view($this->formView,$this->data);
            if ($this->footerView) { $this->load->view($this->footerView,$this->data); }

        } else {
            // success! email it, assume it sent, then show contact success view.

            $this->load->library('email');
            $this->email->from($this->input->post('email'), $this->input->post('name'));
            $this->email->to($this->sendEmailTo);
            $this->email->subject($this->subjectLine);
            $this->email->message($this->input->post('message'));
            $this->email->send();

            if ($this->headerView) { $this->load->view($this->headerView,$this->data); }
            $this->load->view($this->successView,$this->data);
            if ($this->footerView) { $this->load->view($this->footerView,$this->data); }


    }

查看：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">

    <title>Carousel Template for Bootstrap</title>

    <link href="<?php echo base_url().'css/bootstrap.css' ?>" rel="stylesheet" type="text/css">
    <link href="<?php echo base_url().'css/bootstrap-responsive.css' ?>" rel="stylesheet" type="text/css"> </head>


     <div class="input-group">
     <h1>Contact Form</h1>
     <?php echo validation_errors(); ?>
<?

    echo form_open(current_url()); 

?>

<p>
<?php

    echo "<tr>
        <td>" . form_label('Name: ', 'name') . "</td>
        <td>" . form_input('name', set_value('name')) . "</td>
        </tr>";

    echo "<tr>
        <td>" . form_label('Email: ', 'email'). "</td>
        <td>" . form_input('email', set_value('email')) . "</td>
        </tr>";

    echo "<tr>
        <td>".form_label('Message: ', 'message'). "</td>
        <td><textarea name='message'>" . set_value("message") . "</textarea></td>
        </tr>";

    echo "<tr>
        <td>".form_submit('submit', 'Submit Message') . "</td>
        </tr>";

?>
</table>

<?
    echo form_close();
?>
</div>

我想使用的 Bootstrap CSS 示例：

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

【问题讨论】：

您的控制器中缺少'。错字？
是的 - 不小心把我自己的电子邮件放在了最初并匆忙编辑！好地方 - 谢谢！

标签： php html css codeigniter twitter-bootstrap

【解决方案1】：

首先，您应该在 php 标记之外构建您的标记，并仅使用 php 来回显各个输入，您可以将所需的属性作为数组参数传递给 form_input()，有关 here 的更多信息。

例子：

<div class="input-group">
  <span class="input-group-addon">@</span>
  <?php echo form_input(array("class"=>"form-control","placeholder"=>"Username"))?>
</div>

【讨论】：

【解决方案2】：

codeigniter + bootstrap for forms 的绝妙之处在于，一旦您设置了一些配置默认值，您就不必考虑它了。进行一些配置来保存引导代码并使用 codeigniter 表单助手为表单字段所需的代码创建数组。这样所有重要的事情都发生在配置文件中，并且视图非常简单。

 // in config file -- this is bootstrap code that is repeated over and over 
 // so i just make some quick configs to hold the html code
 $config['btcgroup'] = '<div class="control-group">';
 $config['btclabel'] = array(
'class' => 'control-label'
 );
 $config['c2divs'] = '</div></div>';

// quick form field example
$config['spnam01'] = 'Shipping First Name';
$config['spary01'] = array(
'name'        => 'sp01',
'maxlength'   => '60',
'size'        => '20',
'class' => 'input-medium',
'placeholder'=> 'First name'
);
$config['sphelp01'] = '<p class="help-block"> Required Field </p>';

 // and put it together in the view for form field sp01
    echo $btcgroup.form_label($spnam01.$formreq, 'sp01',$btclabel ).$btcontrols.form_input($spary01,set_value('sp01')).form_error('sp01'); 
echo $c2divs;

没有 html 代码来构建表单。 我们不会尝试混合使用 php 和 html，一旦您有了自己喜欢的模板 - 您可以非常快速地创建表单。（请注意，此示例中可能缺少某些内容，但应该可以帮助您入门）

【讨论】：