html5表单API h5 form表单

转载

autohost 2023-12-13 23:33:57

文章标签 html5表单API html 属性值表单 文章分类 HTML5 移动开发

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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。