被领导怼:“你怎么连 Form 表单都搞不定?”

简介: 被领导怼:“你怎么连 Form 表单都搞不定?”

在网页开发中,表单(Form)是用户与网页进行交互的主要方式之一。通过表单,用户可以向网站提交数据,进行搜索、注册、登录等操作。表单由多种标签组成,其中最基本的包括 <form>、<input>和<textarea>。


<form> 标签


<form> 标签是 HTML 中用于创建表单的主要标签。 它定义了一个 HTML 表单,用于用户输入的交互界面。 常见的属性包括 action 和 method,用于指定表单提交的目标地址和提交方式。



<form> 标签是 HTML 中用于创建表单的主要标签。它定义了一个 HTML 表单,用于用户输入的交互界面。常见的属性包括 action 和 method,用于指定表单提交的目标地址和提交方式。


<form action="/submit_form" method="post"<!-- 表单内容 --></form>



<input> 标签


<input> 标签用于在表单中创建各种类型的输入字段,比如文本框、密码框、单选框、复选框等。根据不同的 type 属性值,<input> 标签可以实现不同的输入方式。


 <form>
        <input type="text" name="username" placeholder="请输入用户名" <input type="password" name="password"
            placeholder="请输入密码" />
        <input type="checkbox" name="remember" />记住我
        <input type="radio" name="gender" value="male" />男
        <input type="radio" name="gender" value="female" /> 女

    </form>

4820a672d693e76b975ceb980fa96237.png


<textarea> 标签


<textarea> 标签用于创建多行文本输入框,适合用户输入大段文本的情况,比如留言板、评论等。


<form>
        <textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>

    </form>

21dc68e0df55348e2c9e1777d1a3c66b.png

常用登陆示例


在网页开发中,表单(Form)是用户与网页进行交互的主要方式之一。通过表单,用户可以向网站提交数据,进行搜索、注册、登录等操作。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单示例</title>
</head>
<body>

<h2>用户登录</h2>

<form action="/login" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required><br><br>

  <input type="checkbox" id="remember" name="remember">
  <label for="remember">记住我</label><br><br>

  <input type="submit" value="登录">
</form>

</body>
</html>

88ad297ee2579e186ef392d53deadcc4.png

相关文章
|
JSON Java 数据安全/隐私保护
公司新来了一个同事,把权限系统设计的炉火纯青
RBAC 全称为基于角色的权限控制,本段将会从什么是RBAC,模型分类,什么是权限,用户组的使用,实例分析等几个方面阐述RBAC
|
信息无障碍
最常见的面试问题与技巧性答复 | HR的小心思,你真的懂吗?
最常见的面试问题与技巧性答复 | HR的小心思,你真的懂吗?
212 0
|
JavaScript 前端开发
(小说版)【简历优化平台-5】夜半撞见男女哭,form表单初运用
(小说版)【简历优化平台-5】夜半撞见男女哭,form表单初运用
|
消息中间件 安全 JavaScript
公司新来了一个同事,把权限系统设计的炉火纯青!上
公司新来了一个同事,把权限系统设计的炉火纯青!上
|
JSON 数据库 数据安全/隐私保护
公司新来了一个同事,把权限系统设计的炉火纯青!下
公司新来了一个同事,把权限系统设计的炉火纯青!下
|
前端开发 API
公司从大厂挖了一个资深工程师,他写的Controller代码同事都说漂亮! 下
公司从大厂挖了一个资深工程师,他写的Controller代码同事都说漂亮! 下
|
消息中间件 JSON 前端开发
公司从大厂挖了一个资深工程师,他写的Controller代码同事都说漂亮! 上
公司从大厂挖了一个资深工程师,他写的Controller代码同事都说漂亮! 上
|
设计模式 缓存 NoSQL
公司新来一个同事,把优惠券系统设计的炉火纯青!
公司新来一个同事,把优惠券系统设计的炉火纯青!
|
JSON 数据库 数据安全/隐私保护
公司新来了一个同事,把权限系统设计的炉火纯青!(二)
公司新来了一个同事,把权限系统设计的炉火纯青!(二)
公司新来了一个同事,把权限系统设计的炉火纯青!(二)
|
消息中间件 安全 JavaScript
公司新来了一个同事,把权限系统设计的炉火纯青!(一)
公司新来了一个同事,把权限系统设计的炉火纯青!
公司新来了一个同事,把权限系统设计的炉火纯青!(一)