【JavaWeb02】-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60657566/article/details/125687483

本文介绍了JavaWeb中初始表单的POST和GET提交，涉及文本框、单选/多选框、按钮、列表框、文件域等元素，并详细讲解了搜索框、滑块验证及简单表单验证。重点讲解了表单的引用和初级验证技巧，如placeholder、required和正则表达式。

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

JavaWeb02

初始表单post和get提交

form:表单
action:提交的位置
method:get和post（get可以在url中看到提交的信息，不安全，高效）

文本框和单选框

input=“text”
input=“radio” value:默认值 name:分组

按钮和多选框

按钮：button，image，submit，reset
input=“checkbox” value:默认值 name:分组

列表框和文件域

select name
optio：选项 value:默认值
input=“textarea” clos,rows

搜索框滑块和简单验证

input=“range” max min step
input=“search”

表单的引用

readonly：只读
disabled：禁用
hidden：隐藏域，传递一个默认值value

增强鼠标可用性

<lable for="mark>点我试试看</lable>
<input type="text" id="mark">

表单初级验证

placeholder:提示信息
required:表单不为空
pattern:正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>注册</h1>
<!--敲=可以进行提示-->
<!--表单form
input:你自己要输入数据
name:需要读取一个值必须上传name
action:表单提交的位置，可以是网站，也可以是一个请求处理位置
method:post,get提交方式
get方式提交:可以在url中看懂我们提交的信息，不安全，高效
post:比较安全，传输大文件
-->

    <form action="1.我的第一个网页.html" method="get"></form>
<!--文本输入框：input type="text"
value：默认值
maxlength: 长度限制
-->
    <p>名字: <input type="text" name="username" value="狂神好帅" maxlength="8" size="30"></p>
<!--密码框: input type="password"-->
    <p>密码: <input type="password" name="pwd"></p>
<!--radio:单选框
value:单选框的值
name:相同表示在一个组中(不在同一个组则可以同时选两个)
-->
    <p>性别:
        <input type="radio" value="boy" name="sex" disabled>男
        <input type="radio" value="girl" name="sex">女

    </p>
<!--checkbox:多选框-->
    <p>
        爱好：
        <input type="checkbox" value="a" name="hobby">睡觉
        <input type="checkbox" value="b" name="hobby">敲代码
        <input type="checkbox" value="c" name="hobby">聊天
        <input type="checkbox" value="d" name="hobby">游戏
    </p>

<!--按钮
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置按钮
    value:显示在按钮上的值
-->
<p>
    按钮:
    <input type="button" name="btn1" value="点击边长">
    <input type="image" src="../resources/image/1.png">
</p>

    <!--提交：submit  重置：reset-->
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>


<!--下拉框，列表框
value:后端程序员可以接收到的值
selected:列表选中
checked:单选框/多选框选中
-->
<p>
    <select name="列表名称" >
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth" selected>瑞士</option>
        <option value="yingdu">印度</option>
    </select>
</p>

<!--文本域 cols="30" rows="10"-->
<p>
    <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域
name:确保url中有内容
按钮的name作用是显示在按钮的上面，value的作用则是在url中起作用
-->
<p>
    <input type="file" name="file">
    <input type="button" name="upload" value="上传">
</p>
<!--邮件验证-->
<p>
    邮件：<input type="email" name="email">
</p>
<!--url-->
<p>
    url: <input type="url" name="url">
</p>
<!--数字-->
<p>
    数字： <input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块 声音大小-->
<p>
    滑块: <input type="range" min="0" max="100" name="voice" step="2">
</p>
<!--搜索框
后面多了一个×
-->
<p>
    搜索：<input type="search" name="search">
</p>

<p>名字: <input type="text" name="username" value="admin" readonly></p>
<!--
readonly:只读
disabled:禁用
hidden:隐藏域 传递一个默认值value
-->

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>


<!--placeholder:提示信息-->
<p><input type="text" name="username" placeholder="请输入用户名"></p>
<!--required:表单不能为空-->
<!--pattern:正则表达式-->
<p>
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
</body>
</html>