Bootstrap 表单样式重写
以下是对给定表单的 Bootstrap 样式重写:
<form action="repair!publishsave" method="post" id="myform">
<div class="post-input-wrap">
<div class="form-group">
<label for="note-title">标题:</label>
<input type="text" id="note-title" class="form-control" name="title" validate="required:true"/>
</div>
<div class="form-group">
<label for="search-goods-type">维修类型:</label>
<select name="cid" id="search-goods-type" class="form-control" validate="required:true">
<option value="1" selected="selected">软件故障</option>
<option value="2">硬件故障</option>
<option value="3">系统维护、清理</option>
<option value="4">其他问题</option>
</select>
</div>
<div class="form-group">
<label for="note-info-goods">需要维修的物品名称:</label>
<input type="text" id="note-info-goods" name="name" class="form-control" validate="required:true"/>
</div>
<div class="form-group">
<label for="note-info-address">您的位置(就近寻求帮助):</label>
<input type="text" id="note-info-address" name="address" class="form-control" validate="required:true"/>
</div>
<div class="form-group">
<label for="note-contact-phone">您的手机:</label>
<input type="text" id="note-contact-phone" name="mobile" class="form-control" placeholder="请填写手机号码"
validate="required:true,mobile:true,minlength:2,maxlength:40"/>
</div>
<div class="form-group">
<label for="note-contact-qq">您的QQ:</label>
<input type="text" id="note-contact-qq" name="qq" class="form-control" placeholder="qq、手机请至少填写一个"/>
</div>
<input type='hidden' id='type' name='type' value='lost'/>
<div class="form-group">
<label for="note-content">详情描述:</label>
<textarea id="note-content" name="info" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="note-info-extra">备注:</label>
<input type="text" id="note-info-extra" name="remark" class="form-control">
</div>
<p class="text-right">
<button type="submit" class="btn btn-primary" id="post-submitBotton">发布信息</button>
</p>
</div>
</form>
在上面的代码中,我使用了 Bootstrap 的 form-group 类来包装每个表单项,并使用了 form-control 类来设置表单项的样式。我还使用了 text-right 类将“发布信息”按钮右对齐。
原文地址: https://www.cveoy.top/t/topic/fz1z 著作权归作者所有。请勿转载和采集!