HTML基础02

一、初始表单post和get

1. post和get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action：表单提交位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get方式提交：我们可以在url中看到我们的信息，不安全，但是高效
    post方式提交：比较安全，传输大文件

-->
<form action="1.My first Web.html" method="post">

<!--文本输入框：input type="text"-->
<p>名字：<input type="text" name="username"></p>
<!--密码框：input type="password"-->
<p>密码：<input type="password" name="password"></p>

<p>
<!--提交-->
  <input type="submit">
<!--重置-->
  <input type="reset">
</p>
    
</form>
</body>
</html>

２．文本框和单选框

<!--单选框标签：input type="radio"
value：单选框的值
name：表示组      如果组名相同则是单选，否则是多选
-->
<p>性别：
  <input type="radio" value="boy" name="sex"/>男
  <input type="radio" value="girl" name="sex"/>女
</p>

3. 按钮和多选框

<!--多选框
input type="checkbox"
-->
<p>爱好：
  <input type="checkbox" value="sleep" name="hobby">睡觉
  <input type="checkbox" value="eat" name="hobby">吃烤肉
  <input type="checkbox" value="study" name="hobby">学习
  <input type="checkbox" value="game" name="hobby">游戏
</p>

<!--按钮
input type="button"     普通按钮
input type="image"      图像按钮
input type="submit"     提交按钮
input type="reset"      重置（清空）
-->
<p>按钮：
    <input type="button" value="点击领取自助餐烤肉券" name="btn01">
    <input type="image" src="../resources/image/1.png">
</p>

4. 列表框（下拉框）、文本域、文件域

<!--下拉框，列表框
selected：默认选中
-->
    <p>国家：
        <select name="列表名称" >
            <option value="China" selected>中国</option>
            <option value="US">美国</option>
            <option value="Eth">瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>

<!--文本域
-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
<!--文件域
input type="file" name="files"

注意：input标签和表单元素都需要name属性
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

5. 搜索框滑块和简单验证

<!--邮件验证-->
<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="1">
    </p>

<!--滑块-->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="1">
    </p>
<!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

6. 表单的应用

1.隐藏域

<p>密码：<input type="password" name="psw" hidden/></p>

2.只读

<p>名字：<input type="text" name="username" value="I love eat meant" readonly/></p>

3. 禁用

<p>性别：
  <input type="radio" value="boy" name="sex" checked disabled/>男
  <input type="radio" value="girl" name="sex"/>女
</p>

7.表单初级验证

思考：为什么要进行表单验证？

减轻服务器压力

为了数据的安全性

常用方法

placeholder

提示信息 用在所有的输入框中

<p>名字：<input type="text" name="username" placeholder="请输入用户名"/></p>

required

非空判断 用在所有的输入框中

<p>名字：<input type="text" name="username" placeholder="请输入用户名" required/></p>

pattern

正则表达式

   <p>自定义邮箱：
        <input type="text" name="diy_mail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
posted @ 2025-02-26 16:57  LYQ学Java  阅读(16)  评论(0)    收藏  举报