Foundation 表單


Foundation 表單控制會自動設定為全域樣式:

所有<textarea>, <select> 及<input> 元素寬度皆為100%，且有外邊距、內邊距、陰影喝滑鼠移動效果。

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;">

<h2>表单</h2>
<form>
  Input:
  <input type="text" placeholder="Name">

  Textarea:
  <textarea rows="4" placeholder="Address"></textarea>

  Select:
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</form>

<p> Foundation 会自动渲染表单样式。你可以移除样式文件 foundation.min.css 来查看原生的 HTML 表单。</p>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

標籤

在表單中使用<label> 元素來設定標籤，標籤可以加入for 屬性和id 屬性。使用者在點擊標籤或輸入網域時取得輸入框焦點：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;">

<h2>标签</h2>
<form>
  <label for="name">Input
    <input type="text" placeholder="Name" id="name">
  </label>

  <label for="address">Textarea
    <textarea rows="4" placeholder="Address" id="address"></textarea>
  </label>

  <label for="num">Select
    <select id="num">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </label>
</form>

</body>
</html>

執行實例»

點選"執行實例" 按鈕查看線上實例

如果需要設定標籤右對齊，可以使用.right 類別:

##實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;">

<h2>标签</h2>
<form>
  <label for="name" class="right">Input
    <input type="text" placeholder="Name" id="name">
  </label>

  <label for="address" class="right">Textarea
    <textarea rows="4" placeholder="Address" id="address"></textarea>
  </label>

  <label for="num" class="right">Select
    <select id="num">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </label>
</form>

</body>
</html>

運行實例»##點擊"運行實例"按鈕查看線上實例

Fieldset

Foundation 渲染

<fieldset>

元素的樣式如下：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;">

<h2>fieldset</h2>
<form>
  <fieldset>
    <legend>fieldset Legend</legend>
    <label>Name
      <input type="text" placeholder="First Name..">
    </label>
    <label>Email
      <input type="text" placeholder="Enter email..">
    </label>
  </fieldset>
</form>

</body>
</html>

##執行實例»

#點擊"運行實例" 按鈕查看線上實例

錯誤狀態
使用

.error

類別來設定錯誤的標籤、輸入框、文字框樣式:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;">

<h2>错误状态</h2>
<form>
  <label class="error">错误
    <input type="text" placeholder="Name..">
  </label>
  <small class="error">输入错误</small>

  <textarea rows="4" placeholder="Address"></textarea>
  <small class="error">输入错误</small>
</form>

</body>
</html>

#執行實例»

點擊"運行實例"按鈕查看線上實例

←
→

PHP中文網

首頁首頁課程課程文章文章問答問答詞典詞典手册手册下載下載搜尋搜尋APP下載 APP下載
你需要使用JavaScript 來更新使用者輸入的錯誤狀態。 Note