在HTML中Form标签中常用的属性

一.target属性：窗口的打开方式

        1._self:在原窗口打开

<div>
        <a href="https://www.baidu.com/" target="_self">点击跳转到百度</a>
    </div>

这是它运行的结果：

点击图中的文字就会实现跳转并在原窗口打开

  2. _blank：打开一个新的窗口

<div>
        <a href="https://www.baidu.com/" target="_blank">点击跳转到百度</a>
    </div>

它的运行结果则是重新打开一个窗口

二，action属性：表单的提交路径(相对路径和绝对路径)

<form action="./demo5.html" method="get" target="_blank">
    <div>
            用户姓名: <input type="text" placeholder="请输入您的姓名" maxlength="5" minlength="2" name="userName" value="黑神话悟空"
                readonly>
        </div>
        <div>
            用户密码: <input type="password" placeholder="请输入您的密码" name="userPassword" required>
        </div>
    <input type="submit">
</form>

 运行前： 路径是demo9.html

 运行后路径变成demo5

三，【method属性】：表单的提交方式

        1.get 方法(显示在url地址栏中)

<form action="./demo5.html" method="get" target="_blank">
        <div>
                用户姓名: <input type="text" placeholder="请输入您的姓名" maxlength="5" minlength="2" name="userName" value="黑神话悟空"
                    readonly>
            </div>
            <div>
                用户密码: <input type="password" placeholder="请输入您的密码" name="userPassword" required>
            </div>
            <div>
                用户邮箱: <input type="email" placeholder="请输入您的邮箱" name="userEmail" required>
            </div>
            <div>
                输入网址: <input type="url" placeholder="请输入完整的网络地址" name="userUrl" required>
            </div>
            <div>
                用户体温: <input type="number" name="temperature" max="42" min="34" step="0.1">
            </div>
            <div>
                搜索内容: <input type="search" name="searchContent" placeholder="请输入搜索的关键字">
            </div>
        <input type="submit">
    </form>

        运行前,输入用户信息

运行之后所有的用户信息会出现在url地址栏中(信息相对不安全)

        2.post方法(不会显示在url地址栏中，需要服务器的支持)

<form action="./demo5.html" method="post" target="_blank">
        <div>
                用户姓名: <input type="text" placeholder="请输入您的姓名" maxlength="5" minlength="2" name="userName" value="黑神话悟空"
                    readonly>
            </div>
            <div>
                用户密码: <input type="password" placeholder="请输入您的密码" name="userPassword" required>
            </div>
            <div>
                用户邮箱: <input type="email" placeholder="请输入您的邮箱" name="userEmail" required>
            </div>
            <div>
                输入网址: <input type="url" placeholder="请输入完整的网络地址" name="userUrl" required>
            </div>
            <div>
                用户体温: <input type="number" name="temperature" max="42" min="34" step="0.1">
            </div>
            <div>
                搜索内容: <input type="search" name="searchContent" placeholder="请输入搜索的关键字">
            </div>
        <input type="submit">
    </form>

 运行前,输入用户信息

 运行后信息不会出现在url地址栏中