Foundation form


Foundation form controls are automatically set to global styles:

All <textarea>, <select> and <input> The width of the elements is 100%, with margins, padding, shadows and mouse movement effects.

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

Run instance»

Click the "Run instance" button to view the online instance

Label

Use the <label> element in the form to set the label. The label can add the for attribute and id attribute. Get input box focus when the user clicks on a label or input field:

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

Run instance»

Click" Run instance" button to view the online instance

If you need to set the label to be right aligned, you can use .right Class:

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

Run instance»

Click the "Run instance" button to view the online instance

Fieldset

Foundation rendering <fieldset> The style of the element is as follows:

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

Run Example»

Click the "Run Instance" button to view the online instance

Error status

Use the .error class to set error labels, input boxes, and text boxes Style:

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>

Run instance»

Click the "Run instance" button to view the online instance

NoteYou need to use JavaScript to update the error status of user input.