HTML表单

HTML表单

配置表单

action属性

需要注意的点：

1.如果不设置form元素的action属性，那么浏览器会将表单发送到该HTML文档的URL
2.如果为action属性指定的是一个相对URL，那么该值会被嫁接在当期页的URL(如果使用了base元素，则为其href的值)的后面。

如：<base href="http://abc.com"> form的action对应的值为abc.html，其地址为：http://abc.com/abc.html

配置数据编码
enctype属性指定了浏览器对发送服务器的数据采用的编码方式，有3个值：

值	说明
application/x-www-form-urlencoded	默认编码方式。它不能用来将文件上传到服务器
multipart/form-data	用于将文件上传到服务器
text/plain	编码方式因浏览器而异

设置表单名称：name属性可以用来设置一个独一无二的标识符，以使用DOM时区分各个表单。

---

自动聚焦到某个input元素autofocus

禁用单个input元素disabled

---

button元素

button元素的type属性值有3种：

值	说明
submit	提交表单
reset	重置表单
button	表示按钮没有具体语义

button提交表单还可以使用如下的形式：

<button type="submit" formaction="http://baidu.com" formmethod="post">Submit</button>

这些属性主要用来覆盖或补充form元素上的设置。

使用

提交表单之前检查，检查通过之后提交

如下表单：

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

提交之前的检查为：

<script>
    function validateForm(){
        var x = document.forms["myForm"]["fname"].value;
        if(x == ""){
            alert("name为空");
            return false;
        }
    }
</script>