最近在做的部分与 HTML 的 form 表单相关，记录下以下几个问题。
一般情况下，form 表单的提交按钮会写在 form 表单内，而且非常方便，如:
1 2 3 4 5
| <form action="/userlist/add" method="POST"> 用户名：<input type="text" id="username" required="required" /> 密码：<input type="text" id="password" required="required" /> <input type="submit" value="提交" /> </form>
|
这样，就会有一个叫提交的按钮，点击后会执行 form 的 action。
但有时我们需要在 form 标签以外的某一个 button 上执行表单的提交。比如在另外一个 div 上有一个 button。这时就让这个 button 去执行一个 js 方法，用 js 去调用这个 form 的submit 方法即可，如：
1 2 3 4 5 6 7 8 9 10
| <div class="modal-body"> <form action="/userlist/add" method="POST" id="formNewUser"> 用户名：<input type="text" id="username" /> 密码：<input type="text" id="password" /> <input type="submit" value="提交" /> </form> </div> <div class="modal-footer"> <button onclick="$('#formNewUser').submit()">提交</button> </div>
|
注意，直接调用 submit 方法的方式提交，即使给 username 和 password 的 input 标签添加了 required 属性，也不会自动校验，而是直接执行 action 的方法。所以如果需要校验必填项，就在 js 方法里面校验，如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <div class="modal-footer"> <button onclick="submitValidate()">提交</button> </div> <script type="text/javascript"> function submitValidate() { if ($("#username").val().length == 0) { alert("请输入用户名"); } else if ($("#password").val().length == 0) { alert("请输入密码"); } else { $('#formNewUser').submit() } } </script>
|
如果一个 button 在 form 表单里，那他默认就是一个 submit 按钮，不管你有没有写成 type="submit"。
1 2 3
| <form> <button>...</button> </form>
|
但有些按钮我们并不想让它执行提交，则可以对其添加属性 type="button" 即可。
提交非由用户填写的参数
有时我们需要在调用接口时，提交一些不是由用户填写的参数。
如编辑一条数据，其 id 是程序在提交时直接填充上的，而不需要由用户填写，也不需要用户看到。
这时，只需要在 form 里增加一个 input，并且将其 hidden 属性设置为 hidden，value 属性设置为所需要提交的值即可。如:
1 2 3 4 5
| <form> <input type="text" value="1234567890abcdef" hidden="hidden" name="id" /> <input type="text" name="username" /> <input type="text" name="address" /> </form>
|
