如何使用 Skeleton Boilerplate 发送表单
How to send form using Skeleton Boilerplate
我开箱即用地使用 Skeleton,并制作了一个非常简单的登录页面。
我正在使用他们网站示例 (http://getskeleton.com/#forms) 中提供的表单样式:
<!-- The above form looks like this -->
<form>
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Send a copy to yourself</span>
</label>
<input class="button-primary" type="submit" value="Submit">
</form>
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
但我没有看到我控制表单在提交时发送到的位置。
谁能解释一下如何使用 Skeleton 发送表单?
抱歉这个愚蠢的问题,但我迷路了。
谢谢,
梅尔文斯
我相信他们只是为您提供布局 html 和 css。您需要为表单元素提供一个动作属性 (action='myurl') 或 id (id='myform')。这是一个仅使用 action 属性的简单示例:
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form action="myform.php">
Name: <input type="text" name="name">
<input type="submit">
</form>
更好的是,您可以使用 jQuery 或 javascript 设置一个事件处理程序,该事件处理程序将检测对按钮的点击并将您的表单输入数据发送到任何您喜欢的地方:
$( "#myform" ).submit(function( event ) {
alert( "name data sent to myform.php" );
$.post( "myform.php" );
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form id="myform">
Name: <input type="text" name="name">
<input type="submit">
</form>
我开箱即用地使用 Skeleton,并制作了一个非常简单的登录页面。
我正在使用他们网站示例 (http://getskeleton.com/#forms) 中提供的表单样式:
<!-- The above form looks like this -->
<form>
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Send a copy to yourself</span>
</label>
<input class="button-primary" type="submit" value="Submit">
</form>
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
但我没有看到我控制表单在提交时发送到的位置。
谁能解释一下如何使用 Skeleton 发送表单?
抱歉这个愚蠢的问题,但我迷路了。
谢谢, 梅尔文斯
我相信他们只是为您提供布局 html 和 css。您需要为表单元素提供一个动作属性 (action='myurl') 或 id (id='myform')。这是一个仅使用 action 属性的简单示例:
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form action="myform.php">
Name: <input type="text" name="name">
<input type="submit">
</form>
更好的是,您可以使用 jQuery 或 javascript 设置一个事件处理程序,该事件处理程序将检测对按钮的点击并将您的表单输入数据发送到任何您喜欢的地方:
$( "#myform" ).submit(function( event ) {
alert( "name data sent to myform.php" );
$.post( "myform.php" );
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form id="myform">
Name: <input type="text" name="name">
<input type="submit">
</form>