Java前端：表单元素与验证详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43243190/article/details/103616811

本文主要探讨Java前端中的表单基础知识，包括单选按钮、复选框、下拉框、按钮、文本域、文件域的使用，以及表单验证和数字输入、滑块、搜索框等交互元素的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Java前端知识举例3

(重点)表单:
基础表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础表单</title>
</head>
<body>

<form action="test.html" method="post">
    <p>名字 <input type="text" name="username"></p>
    <p>密码 <input type="password" name="password"></p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框 </title>
</head>
<body>
    <!--文本框 type=""text
    value :文本框默认的初始值
    size :文本框默认长度
    maxlength 文本框的最大输入长度-->
<p><input type="text" name="username" value="用户名" size="20" maxlength="20" height="15"></p>

    <!--密码框 type = "password"
    size = "" 密码框的长度-->
    <p><input type="password" name="password" size="20"></p>
</body>
</html>

在这里插入图片描述
单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--单选框 type="radio"
value :表单提交的值
name: 名字相同，则自动分组，必须要有分组
checked: 默认选中
disabled：禁用
注意事项: 默认没有值，需要再 radio 后面增加单选框的属性-->
    <p>
        <input type="radio" value="男" name="sex" >男
        <input type="radio" value="女" name="sex" >女
    </p>
</body>
</html>

在这里插入图片描述

复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
</head>
<body>
<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
    <input type="checkbox" name="hobby" value="playgame">玩游戏<br>
    <input type="checkbox" name="hobby" value="music">音乐<br>
    <input type="checkbox" name="hobby" value="basketball">打篮球<br>

</p>
</body>
</html>

在这里插入图片描述
下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉边框</title>
</head>
<body>
<!--select
name: 组件名字
size 显示的数量，默认为1
option: 选项
value 必填
selected 默认选中-->
<select name="城市" size="1" >
    <option value="sh">上海</option>
    <option value="xa">西安</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
</select>
</body>
</html>

在这里插入图片描述
按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
</head>
<body>
<!--value指按钮上的文字-->
<p>
    <input type="submit" value="登录">
    <input type="reset" value="清空">
    <input type="button" value="按钮">
    <!--图片按钮用image-->
    <input type="image" src="../statics/images/t01b44869c821955adf.png">
</p>
</body>
</html>

在这里插入图片描述 文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域</title>
</head>
<body>
<textarea name="textarea" cols="30" rows="10"></textarea>
</body>
</html>

在这里插入图片描述 文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件域</title>
</head>
<body>
<!--
表单，需要支持提交复杂文件  enctype="multipart/form-data"
-->
<form action="rest.html" method="get" enctype="multipart/form-data"><input type="file" name="video"></form>
</body>
</html>

在这里插入图片描述验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证</title>
</head>
<body>
<!--邮箱验证-->
    <p>邮箱 <input type="email" name="email"></p>
<!--网址基本验证-->
    <p>url <input type="url" name="url"></p>
</body>
</html>

在这里插入图片描述 数字(选中，上下)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字</title>
</head>
<body>
<!--数字，商品数量，计数，type="number"
最小值 min="0"
最大值 max="100"
步长 step ="10"-->
<p>
    数字：<input type="number" min="0" max="100" step="10">
</p>
</body>
</html>

在这里插入图片描述 滑块（可调节）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字</title>
</head>
<body>
<!--数字，商品数量，计数，type="number"
最小值 min="0"
最大值 max="100"
步长 step ="10"-->
<p>
    数字：<input type="number" min="0" max="100" step="10">
</p>
</body>
</html>

在这里插入图片描述
搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
</head>
<body>
    <p><input type="search" name="search">
    </p>
</body>
</html>

在这里插入图片描述