[英]Contact Form using PHP, CSS, CodeIgniter and Bootstrap
我正在使用CodeIgniter,使用Bootstrap進行樣式化以構建一個具有聯系頁面的網站。
我無法對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標簽之外構建你的標記,然后使用php來回顯各個輸入,你可以將你需要的屬性作為數組參數傳遞給form_input()
, 這里有更多信息。
例:
<div class="input-group">
<span class="input-group-addon">@</span>
<?php echo form_input(array("class"=>"form-control","placeholder"=>"Username"))?>
</div>
關於表單的codeigniter + bootstrap的一個很棒的事情是,一旦你設置了一些配置默認值,你就不必考慮它。 做一些配置來保存引導代碼並使用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 - 你可以非常快速地創建表單。 (請注意,此示例中可能缺少某些內容,但它應該讓您入門)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.