历史搜索

<span class="radio-button"><a href="reduceOrders.do?foodId=<%=food.getFoodId()%>">－</a></span>
<span class="order-count"><%=food.getFoodCount()%></span>
<span class="radio-button"><a href="addOrders.do?foodId=<%=food.getFoodId()%>">+</a></span>

.radio-button {
    width: 22px;
    height: 22px;
    display: inline-block;
    border: 1px solid;
    border-radius: 11px;
}

.radio-button > a {
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    /*vertical-align: middle;*/
    line-height: 20px;
}

<select class="form-control form-control-line" name="foodType"
        value="${food.foodType}">
    <option value="鲁菜" <% if (foodType.equals("鲁菜")) out.print(" selected");%> >鲁菜 </option>
    <option value="川菜"<% if (foodType.equals("川菜")) out.print(" selected");%>>川菜</option>
    <option value="东北菜"<% if (foodType.equals("东北菜")) out.print(" selected");%>>东北菜</option>
    <option value="湘菜"<% if (foodType.equals("湘菜")) out.print(" selected");%>>湘菜</option>
    <option value="其他菜系"<% if (foodType.equals("其他菜系")) out.print(" selected");%>>其他菜系</option>
</select>

自定义错误提示信息
<input type="text" id ="phone" name="userTele" placeholder="手机号" required="" pattern="^.{6,}$" required />
document.getElementById("phone").oninvalid = function () {
	document.getElementById("phone").setCustomValidity("请输入正确的手机号!");
};
document.getElementById("phone").oninput = function () {
	document.getElementById("phone").setCustomValidity("");
};

自定义验证
<input type="password" id="password" name="userPwd" placeholder="密码" pattern="^.{6,}$" required="" title="至少六位"/>
<input type="password" id="rePassword" name="userPwd" placeholder="确认密码" required=""/>
document.getElementById("rePassword").oninput = function () {
	if (document.getElementById("password").value !== document.getElementById("rePassword").value)
		document.getElementById("rePassword").setCustomValidity("两次输入的密码不一致!");
	else
		document.getElementById("rePassword").setCustomValidity("");
};