Text Inputs
描述 (Description)
Foundation支持输入类型，如text, password, time, email, date, datetime-local, month, number, search, tel, url和week 。 Text area元素用于创建多行文本输入。
在大多数浏览器中， number输入类型元素将显示向上/向下控件，这些控件称为spin buttons 。 数字可以在字段内递增和递减。 您可以通过将SASS变量$input-number-spinners为false来禁用旋转按钮。
例子 (Example)
以下示例演示了在Foundation中使用input types 。
<html>
<head>
<title>Form Text Inputs</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
</head>
<body>
<form>
<div class = "row">
<div class = "medium-6 columns">
<label>Input Text <input type = "text"></label>
</div>
<div class = "medium-6 columns">
<label>Input search <input type = "search"></label>
</div>
</div>
<div class = "row">
<div class = "medium-4 columns">
<label>Input time <input type = "time"></label>
</div>
<div class = "medium-4 columns">
<label>Input Date <input type = "date"></label>
</div>
<div class = "medium-4 columns">
<label>Datetime <input type = "datetime-local"></label>
</div>
</div>
<div class = "row">
<div class = "medium-4 columns">
<label>Number <input type = "number"></label>
</div>
<div class = "medium-4 columns">
<label>Telephone <input type = "tel"></label>
</div>
<div class = "medium-4 columns">
<label>Month <input type = "month"></label>
</div>
</div>
<div class = "row">
<div class = "medium-6 columns">
<label>Input url <input type = "url"></label>
</div>
<div class = "medium-6 columns">
<label>Input week <input type = "week"></label>
</div>
</div>
<div class = "row">
<div class = "medium-6 columns">
<label>Email<input type = "email"></label>
</div>
<div class = "medium-6 columns">
<label>Password <input type = "password"></label>
</div>
</div>
<div class = "row">
<div class = "medium-12 columns">
<label>Textarea
<textarea>Hi .. This is from textarea.....</textarea>
</label>
</div>
</div>
</form>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
保存上面给出的html代码forms_text_input.html文件。
在浏览器中打开此HTML文件，输出显示如下。
