1、form--把要提交的内容指定特定表单,而这个要提交内容不需要被包含在特定表单中。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="" id="testform">
        <input type="text">
    </form>
    <textarea form="testform"></textarea>
</body>
</html>



2、formaction--可以使在同一表单中的多个不同提交按钮能提交到不同的页面中去。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formaction</title>
</head>
<body>
    <form action="serve.jsp" id="testform">
        <input type="submit" name="s1" value="提交到S1" formaction="s1.jsp">
        <input type="submit" name="s2" value="提交到S2" formaction="s2.jsp">
        <input type="submit" name="s3" value="提交到S3" formaction="s3.jsp">
        <input type="submit" value="默认提交">
    </form>
</body>
</html>



3、formmethod--可以给同一表单里下的不同表单元素提供不同的提交方式。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formmethod</title>
</head>
<body>
    <form action="serve.jsp" id="testform">
        姓名:<input type="text" name="name">
        <br>
        <input type="submit" value="post方式提交" formmethod="post">
        <input type="submit" value="get方式提交" formmethod="get">
    </form>
</body>
</html>



4、fromenctype对表单元素分别制定不同的编码方式。(后面附上enctype属性值及说明)



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formenctype</title>
</head>
<body>
    <form action="formserver.php" method="post">
        姓名:<input type="text" name="name">
        <br>
        文件:<input type="file" name="files">
        <input type="submit" value="上传" formaction="upload.php" formenctype="multipart/form-data">
        <input type="submit" value="提交">
    </form>
</body>
</html>



enctype属性值及说明

属性值 :application/x-www-form-urlencoded    

说明:在发送前编码所有字符,当表单元素的action属性值为get时,浏览器用x-www-form-urlencoded的编码方式把表单数据转换成一个字符串(形式如?name1=value1&name2=value2...),然后把这个字符串添加到提交的目标URL地址的后面,十七成为新的目标URL地址,为默认属性。

属性值:multipart/form-data

说明:不对字符编码,在使用包含文件上传控件的表单时,必须使用该值。

属性值:text/plain

说明:表单数据中的空格被转换为 "+"加号,单不对表单数据中特殊字符进行编码。

 

5、formtarget--表单提交后以哪种方式打开 (属性值及说明后附上)



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formtarget</title>
</head>
<body>
    <form action="formserver.php">
        <input type="submit" name="s1" value="提交S1" formtarget="_self">
        <input type="submit" name="s2" value="提交S2" formtarget="_blank">
    </form>
</body>
</html>



target属性值

属性值:_blank

说明:在新的窗口打开

属性值:_self

说明:target属性的默认值,在相同的框架(frame)中打开

属性值:_parent

说明:在当前框架(frame)的父框架(frame)中打开

属性值:_top

说明:在当前浏览器窗口中打开

属性值:framename

说明:在指定的框架(frame)中打开

 

6、autofocus--自动获得光标焦点



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>autofocus</title>
</head>
<body>
    <form action="formserver.php">
        <input type="text" name="s1" autofocus="" value="">
    </form>
</body>
</html>



7、required--在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户必须输入内容



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>required</title>
</head>
<body>
    <form action="formserver.php">
        <input type="text" required="" name="s1" value="">
        <input type="submit">
    </form>
</body>
</html>



8、labels--label标签中for属性相同的一个集合。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>labels属性的使用示例</title>
</head>
<body>
    <form action="" id="testform">
        <label for="txt_name" id="label">姓名:</label>
        <input type="text" id="txt_name">
        <input type="button" id="btnValidate" value="验证" onclick="Validate()">
    </form>
    <script>
        function Validate(){
            var txtName = document.getElementById('txt_name'),
                btn = document.getElementById('btnValidate'),
                form = document.getElementById('testform');
            if(txtName.value.trim() == ""){
                if(txtName.labels.length == 1){
                    var label = document.createElement('label');
                    label.setAttribute('for','txt_name');
                    form.insertBefore(label,btn);
                    txtName.labels[1].innerHTML = "请输入姓名";
                    txtName.labels[1].setAttribute('style','font-size:12px;color:red;margin-right:5px');
                }
            }else if(txtName.labels.length > 1){
                form.removeChild(txtName.labels[1]);
            }
        }
    </script>
</body>
</html>



9、placeholder 属性提供一种提示(hint),描述输入域所期待的值。提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>placeholder属性的使用示例</title>
</head>
<body>
    <form action="" id="testform">
        <input type="text" id="txt" placeholder="请输入姓名:">
        <input type="submit" value="提交">
    </form>
</body>
</html>



10、list--通过id指向datalist元素,当用户要的值不存在选择列表中,就让用户自行填写,如果有存在用户就可以选择。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist</title>
</head>
<body>
    <form action="form.php" method="get">
        请输入网址: 
        <input type="url" list="list" name="link" />
        <datalist id="list">
            <option label="谷歌" value="http://www.google.com/" />
            <option label="百度" value="https://www.baidu.com/" />
            <option label="淘宝" value="https://www.taobao.com/" />
            <option label="京东" value="https://www.jd.com/" />
        </datalist>
        <input type="submit" />
    </form>
</body>
</html>



 11、autocomplete--规定 form 或 input 域应该拥有自动完成功能,当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>autocomplete</title>
</head>
<body>
    <form action="form.php" method="post" autocomplete="on">
        用户名:<input type="text" name="username" /><br />
        密码: <input type="password" name="password" autocomplete="off" /><br />
        <input type="submit" />
    </form>
</body>
</html>



12、pattern--为input设置正则表达式,在提交时进行检查。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pattern</title>
</head>
<body>
    <form action="form.php" method="post" autocomplete="on">
        请输入以小写字母开头数字结尾的两位数:
        <input type="text" name="test" pattern="[a-z][0-9]" /><br />
        <input type="submit" />
    </form>
</body>
</html>