JSP中页面<a href>、<button>、<input>的设计答案

【问题标题】：Design of page <a href>, <button>, <input> in JSPJSP中页面<a href>、<button>、<input>的设计
【发布时间】：2016-03-26 20:24:45
【问题描述】：

我收到了一项为 HTML 页面 (JSP) 添加功能的任务。该页面仅来自设计师/前端开发人员，因此在某些地方我需要将a href 更改为button 或input，但这会造成混乱并且所有设计都已更改。下面是一段代码：

<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="#" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="#" id="addtext">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>
                <a href="#" class="listItem" id="edit">
                    <span class="editicon">Edit</span>
                </a>
            </li>
            <li>
                <a href="#" class="listItem" id="edittext">
                    <span class="parentInfo">Parent Info</span>
                </a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
    </nav>

我希望它像下面这样，不改变外观：

<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="/register/studentSignup" type="submit" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="/register/studentSignup" type="submit" id="addButton">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>
                <input type="submit" class="listItem" name="action" value="editParentInfo" id="edit" />
                <span class="editicon">Edit</span>
            </li>
            <li>
                <input type="submit" class="listItem" name="action" value="editParentInfo" id="editParent" />
                <span class="parentInfo">Parent Info</span>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="upgrade" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
        <input type="hidden" name="parentID" path="parentID" value="${parentInfo.parentID}">
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    </nav>

【问题讨论】：

这里没有真正需要解决的具体问题。如果更改元素类型会破坏布局，那么您应该更改 CSS 中该元素的样式规则，很可能是 display 属性。

标签： javascript jquery html twitter-bootstrap jsp

【解决方案1】：

您不应该更改给您的设计。在 HTML 中添加/更改可见元素会改变布局。

同时进行这些修改不仅会给设计带来混乱，还会给 HTML 代码添加错误。

锚标记没有type="submit" 属性。此属性在按钮和input 元素中可用。

修改链接上的href 属性使URL 在悬停时可见。这不是设计师强加的预期行为。可能他/她应该指导您如何处理代码以不更改设计。在这种情况下，onclick 和 onsubmit 事件可以使用 javascript 函数处理以提交表单。

这里的示例显示您可以提交带有验证的表单。

注意：该代码仅适用于Edit 按钮。

JSFiddle

HTML：

<form id="editForm" onsubmit="return doValidate();">
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="#" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="#" id="addtext">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>                  
                <a href="#" class="listItem" id="edit"  onclick="doSubmit()">
                    <span class="editicon">Edit</span>
                </a>
                <input type="hidden" name="param" value="editParentInfo"/>

            </li>
            <li>
                <a href="#" class="listItem" id="edittext">
                    <span class="parentInfo">Parent Info</span>
                </a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
    </nav>
    </div>
</form>

JavaScript：

function doSubmit() {
    alert("The form is submitting"); 
    var form =  document.getElementById("editForm");
    form.action="/register/studentSignup";
    form.method="post";
    submitForm(form);
}

function doValidate() {
  var form =  document.getElementById("editForm");
  alert("The form is being submitted\n"+"action="+form.action+", param="+form.param.value); 
  return false;
}

function submitForm(form) {
    //get the form element's document to create the input control with
    //(this way will work across windows in IE8)
    var button = form.ownerDocument.createElement('input');
    //make sure it can't be seen/disrupts layout (even momentarily)
    button.style.display = 'none';
    //make it such that it will invoke submit if clicked
    button.type = 'submit';
    //append it and click it
    form.appendChild(button).click();
    //if it was prevented, make sure we don't get a build up of buttons
    form.removeChild(button);
}

参考资料：

【讨论】：