HTML04-表单详解

目录

一、表单的简单使用

  • 用于像注册登录等前端数据的输入。
  • 表单可以在网页前端对输入的数据进行简单的验证。
  • 使用表单可以有效避免对前端用户输入的数据进行过滤，节约资源，减轻系统后台的压力。

表单的基本语法

<form action="*" method="*"></form>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:提交方式，post（网址隐藏表单数据） get（网址不隐藏表单数据）
-->

一个简单的小例子：注册

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

<h1>注册</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：提交方式，
        post（网址隐藏表单数据，提交大文件）
        get（网址不隐藏表单数据）
-->
<form action="1.第一个网页.html" method="get">

    <!--良好习惯：每个input定义一个name-->

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

    <!--密码输入框 input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>

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

</body>
</html>

二、表单元素格式

1. 文本输入框

		<!--文本输入框 input type="text"-->
		<p>名字：<input type="text" name="username" value="请输入用户名" maxlength="10"></p>

2. 密码输入框

		<!--密码输入框 input type="password"-->
		<p>密码：<input type="password" name="pwd"></p>

3. 数字

    <!--数字 input type="number" 可以进行限制-->
    <p>年龄:
        <input type="number" name="num" min="0" max="100">
    </p>

4. 单选框

    <!--单选框 input type="radio"
        name相同即为一组，互斥
        checked：默认项
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

5. 多选框

    <!--多选框 input type="checkbox"-->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

6. 按钮

    <!--按钮 input type="button"-->
    <p>按钮:
        <input type="button" name="btn1" value="点击">
    </p>

7. 上传文件

    <!--上传文件 input type="file"-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传" >
    </p>

8. 邮箱和URL

    <!--邮箱 input type="email"-->
    <p>邮箱:
        <input type="email" name="email">
    </p>

    <!--URL input type="url"-->
    <p>url:
        <input type="url" name="url">
    </p>

9. 滑块

    <!--滑块 input type="range"-->
    <p>音量滑块:
        <input type="range" name="voice" min="0" max="10">
    </p>

10. 搜索框

    <!--搜索 input type="range"-->
    <p>搜索框:
        <input type="search" name="search">
    </p>

11. 下拉框

    <!--下拉框 select-->
    <p>国家:
        <select name="列表名称">
            <option value="china" selected>中国</option>
            <option value="japan">日本</option>
            <option value="korea">韩国</option>
            <option value="russia">俄罗斯</option>

        </select>
    </p>

12. 文本域

    <!--文本域-->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
	  </p>

13. 增强鼠标可用性

		<!--增强鼠标可用性：点击文字，跳转到输入框 -->
    <p>
        <label for="mark">你点一下试试</label>
        <input type="text" id="mark">
    </p>

三、表单其他设置

  • 隐藏域hidden

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

  • 只读readonly

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

  • 禁用disabled

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

  • 提示信息placeholder

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

  • 必填项required

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

  • 正则化验证pattern

    <!--正则表达式pattern-->
<p>自定义邮箱
    <input type="text" name="diyemail" 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 @ 2022-01-24 10:12  擦镜子的默  阅读(191)  评论(0)    收藏  举报