表单提交方式

方法一:利用form的onsubmit()函数(经常使用)

<script type="text/javascript">
function formdGet() {

 if(document.reply.title.value == ""){ //通过form名来获取form  
        alert("please input the title!");  
        document.reply.title.focus();  
        return false;  
    }     
    if(document.forms[0].cont.value == ""){ //通过forms数组获取form  
        alert("please input the content!");  
        document.reply.cont.focus();  
        return false;  
    }  
    return true;  
  }  
}
</script>

 

<form method="post" id="login_form" onsubmit="return formdGet();">

<div class="top_b">后台管理系统</div>

<div class="cnt_b">

<div class="formRow">

<div class="input-prepend">

<span class="add-on"><i class="icon-user"></i></span><input type="text" id="username" name="username" placeholder="Username" />

</div>

</div>

<div class="formRow">

<div class="input-prepend">

<span class="add-on"><i class="icon-lock"></i></span><input type="password" id="password" name="password" placeholder="Password" />

</div>

</div>

</div>

<div class="btm_b clearfix">

<!-- <button class="btn btn-inverse pull-right" type="submit">登录</button>-->

<input type="submit" value="提交" />

</div>

</form>

 

 

 

 

 

 

方法二:利用input类型为submit组件的onclick()函数

    1.将上面form标签中的onsubmit="return validateForm()"属性,去掉。

    2.为“提交”按钮添加onclick事件,如下:

     <input type="submit" value="提交" onclick="return validateForm();">

方法三:利用button组件的onclick()函数,手动提交。

 <input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它。

<input type="button" /> 这就是一个按钮。如果你不写javascript 的话,按下去什么也不会发生。

<button> 这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容。(当然,前两个用图片背景也可以做到)。它的缺点是不同的浏览器得到的 value 值不同;可能还有其他的浏览器兼容问题。

其他标签,例如 a, img, span, div,然后用图片把它伪装成一个按钮。

<form method="post" id="login_form" onsubmit="return formdGet();">

<div class="top_b">后台管理系统</div>

<div class="cnt_b">

<div class="formRow">

<div class="input-prepend">

<span class="add-on"><i class="icon-user"></i></span><input type="text" id="username" name="username" placeholder="Username" />

</div>

</div>

<div class="formRow">

<div class="input-prepend">

<span class="add-on"><i class="icon-lock"></i></span><input type="password" id="password" name="password" placeholder="Password" />

</div>

</div>

</div>

<div class="btm_b clearfix">

<!-- <button class="btn btn-inverse pull-right" type="submit">登录</button>-->

<input type="submit" value="提交" />

</div>
</form>

 

posted @ 2014-10-23 14:25  清空回声  阅读(171)  评论(0)    收藏  举报