기초 형태


기초 양식 컨트롤은 자동으로 전역 스타일로 설정됩니다:

모든 <textarea>, <select> 및 <input> 요소 너비는 100%이며 여백, 패딩, 그림자 및 마우스 이동 효과가 있습니다. <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

Instance

<!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>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

레이블

<label> 요소에서 레이블은 for 속성과 id 속성을 추가할 수 있습니다. 사용자는 레이블 또는 입력 필드를 클릭할 때 입력 상자 포커스를 얻습니다. rrreee예제 실행»
InstanceNote
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜필요한 경우 레이블을 오른쪽 정렬로 설정하면 < code>.right를 사용할 수 있습니다. 클래스:🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

Fieldset🎜🎜Foundation Rendering<fieldset> 요소의 스타일은 다음과 같습니다: 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜" 온라인 인스턴스를 보려면 인스턴스 실행' 버튼을 누르세요🎜🎜

오류 상태🎜 🎜.error 클래스를 사용하여 오류 레이블, 입력 상자 및 텍스트 상자 스타일을 설정합니다. 🎜🎜 🎜Example🎜🎜rrreee🎜🎜🎜예제 실행»🎜🎜온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요🎜 🎜🎜🎜🎜🎜🎜🎜🎜 사용자 입력의 오류 상태를 업데이트하려면 JavaScript를 사용해야 합니다. 🎜🎜🎜🎜