HTML-表单

最新推荐文章于 2024-07-22 11:58:10 发布

中条山伯爵

最新推荐文章于 2024-07-22 11:58:10 发布

阅读量148

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_41724020/article/details/107463024

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表单初步

form标签的action属性等同于超链接的href属性，填写请求的url。
input标签属于输入域标签，input标签的type属性是text，表示文本框，是password，表示密码框。
input标签的type是submit表示提交按钮，该按钮可以提交表单，所谓表单的提交是发送请求url，并携带数据给服务器。
所有按钮的value属性都是用来设置按钮上显示的文本内容。
发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：
url?name=value&name=value&name=value…，其中name是input标签的name属性，value是input标签的value属性。
重点：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。
文本框和密码框的value不需要开发人员指定，用户填写的数据就是value。
submit按钮放到form标签外面无法提交表单
普通按钮button不具备提交表单的能力。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="http://localhost:8080/oa/save">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="userName"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="userPwd"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交"/>
                    <input type="reset" value="清空"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

效果
在这里插入图片描述

写一个用户注册表单

用户名：
<input type=“text” name=“username” />
value属性不需要写，用户填写的数据就是value

密码：
<input type=“password” name=“pwd” />
value属性不需要写，用户填写的数据就是value

性别：
<input type=“radio” name=“gender” value=“1”/>男
<input type=“radio” name=“gender” value=“0” checked/>女
性别是单选按钮，用户只能选，所以该标签需要添加value属性，checked表示该项默认被选中。同一组的单选按钮，name必须相同。提交给服务器的数据是：gender=1或者gender=0

兴趣
<input type=“checkbox” name=“hobby” value=“sport”/>运动
<input type=“checkbox” name=“hobby” value=“music” />音乐
<input type=“checkbox” name=“hobby” value=“dance” checked/>跳舞
checked表示默认选中，同一组的复选框，name相同。以上三项都被选中的话，提交的数据是：hobby=sport&hobby=music&hobby=dance

学历
<select name=“education”>
<option value=“gz”>高中
<option value=“zk”>专科
<option value=“bk” selected>本科
</select>
selected表示默认选中，当选中本科时，提交的数据为：education=bk

简介
<textarea cols=“列数” rows=“行数” name=“introduce”>
文本域没有value属性，用户填写的内容就是value

注册按钮
<input type=“submit” value=“注册”/>：该标签放在form标签内部才起作用

重置按钮
<input type=“reset” value=“重置” />

再次强调表单提交时的数据格式：
"action?name=value&name=value&name=value&name=value…"
这是HTTP协议中规定的，这些有规律的数据提交给服务器之后，以后服务器端的java程序要解析这段数据的。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册的表单</title>
</head>
<body>
    <!--
        用户名  text
        密码    password
        性别    radio
        兴趣    checkbox
        学历    select
        简介    textarea
    -->
    <form action="http://localhost:8080/register">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="userName"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="userPwd"/></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="1"/>男
                    <input type="radio" name="gender" value="0" checked/>女
                </td>
            </tr>
            <tr>
                <td>兴趣</td>
                <td>
                    <input type="checkbox" name="hobby" value="basketball"/>篮球
                    <input type="checkbox" name="hobby" value="music" checked/>音乐
                    <input type="checkbox" name="hobby" value="dance"/>舞蹈
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <select name="education">
                        <option value="high school">高中</option>
                        <option value="bachelor" selected>本科</option>
                        <option value="master">硕士</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>简介</td>
                <td>
                    <textarea name="introduce" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="注册"/>
                    <input type="reset" value="清空"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

效果
在这里插入图片描述

form表单的method属性

get请求在http协议的请求行上提交数据，最终提交的数据会显示在浏览器的地址栏上。

post请求在http协议的请求体中提交数据，最终提交的数据不会显示在浏览器的地址栏上。

method属性默认是get请求，超链接也是get请求。.

下拉列表支持多选

file控件和hidden控件

<input type=“file”/> 文件上传时使用
<input type=“hidden” name=“userId” value=“111”/> 网页上用户看不到，但是表单提交时，userId=111会被提交给服务器。

readonly和disabled

readonly：只读，不能修改，提交表单时数据会提交。
disabled：只读，不能修改，提交表单时数据不会被提交给服务器。

input标签的maxlength属性

作用：设置文本框可输入字符的数量
用户名<input type=“text” name=“userName” maxlength=“3” />

中条山伯爵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-表单

表单初步form标签的action属性等同于超链接的href属性，填写请求的url。input标签属于输入域标签，input标签的type属性是text，表示文本框，是password，表示密码框。input标签的type是submit表示提交按钮，该按钮可以提交表单，所谓表单的提交是发送请求url，并携带数据给服务器。所有按钮的value属性都是用来设置按钮上显示的文本内容。发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：url?name=valu
复制链接

扫一扫