使用语义 ui 时,您似乎正在尝试重新创建轮子。假设您已在 head 中包含了 semantic.css 的完整版本,并且在 body 结束标记上方包含了 semantic.js,这里是一个简单联系表单的工作代码的缩写版本,其中一些错误工作由语义完成,一些由html5。为了完整起见,我已经包含了一个用户端验证码。HTML
<form class="ui form" name="contact_sdta" action="" method="post">
<div class="field">
<label>Your Email </label>
<div class="ui left labeled icon input">
<input name="email" id="email" placeholder="name@mail.com" type="email">
<i class="mail icon"></i>
<div class="ui corner label">
<i class="asterisk red icon"></i>
</div>
</div>
</div>
<div class="field">
<label>Subject</label>
<div class="ui left labeled icon input">
<input name="subject" id="subject" placeholder="I am interested in more information about" type="text">
<i class="text file outline icon"></i>
<div class="ui corner label">
<i class="asterisk red icon"></i>
</div>
</div>
</div>
<div class="field">
<label>Message</label>
<div class="ui left labeled icon input">
<textarea name="message"></textarea>
<i class="text file outline icon"></i>
<div class="ui corner label">
<i class="asterisk red icon"></i>
</div>
</div>
</div>
<div class="ui buttons">
<input type="reset" value="Cancel" class="ui button">
<div class="or"></div>
<input type="submit" value="Submit" class="ui blue submit button">
</div>
<div class="ui error message"></div>
</form>
mainjs
$(function(){
$('form input[type=reset]')
.before('<div>Are you a human? <input type="checkbox" name="captcha" /><i class="asterisk red icon"></i></div><br />');
$('.ui.form').form({
email: {
identifier: 'email',
rules: [
{
type: 'empty',
prompt: 'Please enter your email'
}
]
},
subject: {
identifier: 'subject',
rules: [
{
type: 'empty',
prompt: 'Please enter a subject'
}
]
},
message: {
identifier: 'message',
rules: [
{
type: 'empty',
prompt: 'Please enter a message'
}
]
},
human: {
identifier: 'captcha',
rules: [
{
type: 'checked',
prompt: 'You must behuman'
}
]
}
});
});
我希望这有助于澄清问题。