HTML表单创建学习

于 2024-05-12 14:45:45 发布
阅读量676 收藏 18
点赞数 29
分类专栏： HTML 文章标签： html 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44774550/article/details/138670633
版权

文章目录

1、创建HTML框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    
</body>
</html>

2.body标签CSS

body{
    width:100%;
    height:100vh;
    margin:0;
    background-color:#1b1b32;
    color:#f5f6f7;
  }

3.表单创建

3.1、添加fieldset与label标签

fieldset>标签：用于将表单中的相关元素进行分组，通常与 legend标签一起使用，以提供关于该组的描述。fieldset标签的主要目的是对表单元素进行逻辑分组，以提高可读性和可用性。

label 标签：用于为表单元素（如输入框、单选按钮等）定义文本描述。label 标签的主要目的是提高用户体验，因为它允许用户通过单击标签文本来选择表单元素，而不仅仅是单击表单元素本身。此外，屏幕阅读器和其他辅助技术也可以使用 label 标签来为用户提供有关表单元素的更多信息。

 <fieldset>
            <label>Enter Your First Name: </label>
            <label>Enter Your Last Name: </label>
            <label>Enter Your Email: </label>
            <label>Create a New Password: </label>
        </fieldset>

3.2、为label标签添加css样式

label{
    display: block;
    margin : 0.5rem 0;
  }

3.3、添加input标签

 <fieldset>
            <label for="first-name">Enter Your First Name:</label>
            <input id="first-name" type="text" />
            <label for="last-name">Enter Your Last Name:</label>
            <input id="last-name" type="text" />
            <label for="email">Enter Your Email:</label>
            <input id="email" type="email" />
            <label for="new-password">Create a New Password:</label>
            <input id="new-password" type="password" />
        </fieldset>

3.4、添加提交按钮

<input type="submit" value="Submit"/>

3.5、在input标签中添加required

required属性的作用是指定表单元素必须填写，不能留空。当用户提交表单时，如果该表单元素未填写，浏览器会阻止表单提交并显示错误提示。

<fieldset>
            <label for="first-name">Enter Your First Name:</label>
            <input id="first-name" type="text"  required/>
            <label for="last-name">Enter Your Last Name:</label>
            <input id="last-name" type="text"  required/>
            <label for="email">Enter Your Email:</label>
            <input id="email" type="email"  required/>
            <label for="new-password">Create a New Password:</label>
            <input id="new-password" type="password"  required/>
        </fieldset>

3.6、添加minlength属性

minlength属性的作用是指定表单元素输入的最小长度，即用户必须输入至少指定长度的字符才能通过验证。如果用户输入的字符数小于指定的最小长度，浏览器会阻止表单提交并显示错误提示。

<input id="new-password" type="password"  required minlength="8"/>

在这里插入图片描述

3.7、pattern属性

pattern属性的作用是指定表单元素输入的模式，即用户必须按照指定的模式输入内容才能通过验证。pattern属性使用正则表达式来描述输入的模式，如果用户输入的内容与正则表达式不匹配，浏览器会阻止表单提交并显示错误提示。

<input id="new-password" type="password"  required pattern="[a-z0-5]{8,}"/>

3.8、设置表单单选按钮无法同时选中

 <fieldset>
            <legend>Account type (required)</legend>
            <label for="personal-account"><input type="radio" name="account-type" checked  id="personal-account" /> Personal</label>
            <label for="business-account"><input type="radio" name="account-type" id="business-account" /> Business</label>
          </fieldset>
        <fieldset></fieldset>
        <label for="terms-and-conditions"><input type="checkbox" id="terms-and-conditions" required></label>
        <input type="submit" value="Submit"/>

在这里插入图片描述

3.9、添加链接

 <label for="terms-and-conditions"><input type="checkbox" id="terms-and-conditions" required>I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a></label>

在这里插入图片描述

3.10、添加图片上传表单

  <fieldset>
            <label>Upload a profile picture: <input type="file"></label>
        </fieldset>

在这里插入图片描述

3.11、添加年龄限制属性

<label>Input your age (years): <input type="number" min="13" max="120" /></label>

在这里插入图片描述

3.12、添加下拉列表

<fieldset>
  <label for="profile-picture">Upload a profile picture:</label>
  <input type="file" id="profile-picture" />
  <label for="age">Input your age (years):</label>
  <input type="number" id="age" min="13" max="120" />
  <label for="referrer">How did you hear about us?</label>
  <select id="referrer">
    <option value="">(select one)</option>
    <option value="1">freeCodeCamp News</option>
    <option value="2">freeCodeCamp YouTube Channel</option>
    <option value="3">freeCodeCamp Forum</option>
    <option value="4">Other</option>
  </select>
  <label for="bio">Provide a bio:</label>
  <textarea id="bio"></textarea>
</fieldset>

在这里插入图片描述

4.完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
      </fieldset>
      <fieldset>
        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
        <label for="referrer">How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio">Provide a bio:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </fieldset>
      <label for="terms-and-conditions">
        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}

input[type="file"] {
  padding: 1px 2px;
}

.inline{
  display: inline; 
}
十一的学习笔记
关注
  • 29
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML：简单表单的创建
DDL_lalala的博客
09-09 684
初学者： 很基础的表单创建： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06-html表单</title> </head> <body> <form action="" method="post"&gt...
前端学习 FreeCodeCamp html 注册表单
03-20
本教程将聚焦于FreeCodeCamp提供的HTML注册表单的学习，旨在帮助初学者掌握创建交互式用户输入界面的核心技术。 首先，我们来看`index.html`文件。这个文件是网页的主要源代码，包含了所有HTML标记。一个基本的HTML...
HTML表单的创建
weixin_30532837的博客
02-04 391
HTML表单的创建 用途： 表单用于获取不同类型的用户输入。 例如，文字，按钮等。 type=“text” 文本的输入 type=“password” 密码的输入 常用的表单： 1.复选框　　　　文本<input type="checkbox">　　 　　　　　　　　代码： 　　　　　　　　效果： 2.单选按钮　　 文本 <inp...
【HTML】——表单的创建
严文文 Chris
06-20 738
表单的创建使用form元素，以及在其间嵌入相关元素&lt;form method=” get” or “post”=”URL”&gt;&lt;form&gt;Get和post的区别Get是缺省值，当采用get方法提交表单时，提交的数据被附加到URL的末端，作为URL一部分发送到服务器端，例如：我们制定action=“reg.jpg”当提交表单后，在浏览器的地址栏中，我们会看到下面的信息：http:...
html之创建表单
chalotte_kan的博客
07-19 1910
用户注册表单
【html+css】html表单
weixin_44377918的博客
02-26 160
表单 1.input type: 1.button 定义可点击按钮。 2.checkbox 定义复选框。 3.file 定义输入字段和 "浏览"按钮，供文件上传。 4.password 定义密码字段。该字段中的字符被掩码。 5.radio 定义单选按钮。 6.reset 定义重置按钮。重置按钮会清除表单中的所有数据。 7.submit 定义提交按钮。提交按钮会把表单数据发送到服务器。 8.text 定义单行的输入字段，用户可在其中输入文本。 2.button 3.select下拉菜单 4.textarea文
HTML 学习总结2 框架 表单
01-08
HTML是 HyperText Markup Language 的缩写，是一种用于创建网页的标准标记语言。在本文中，我们将深入探讨HTML中的框架（frames）和表单（forms）。 首先，我们关注框架。框架是HTML5之前的一个特性，用于将一个...
angular学习之动态创建表单的方法
10-17
在Angular开发中，动态创建表单是一个非常实用的功能，它允许开发者在运行时根据需求构建表单，提高代码的灵活性和可复用性。本文将详细介绍如何在Angular中实现动态创建表单的方法。 首先，我们需要进行一些准备...
HTML学习笔记（五）——表单
01-08
在HTML中创建表单，主要使用`<form>`标签。例如： ```html <!-- 表单内容 --> ``` 这里的`action`属性指定了处理表单数据的服务器端脚本，`method`属性则规定了提交数据的方式，通常是`post`或`get`。 表单包含...
20.4 HTML 表单1
08-04
HTML表单通过`<form>`标签来创建。一个基本的表单结构包括以下部分： ```html <!-- 表单元素 --> ``` 其中，`action`属性定义了处理表单数据的URL，`method`属性指定了提交数据的方式，通常有GET和POST两种。 ...
HTML 表格 表单的制作
m0_60045654的博客
10-21 6586
表格是一种二维结构，横行纵列。表格由单元格组成。每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高。从服务器角度讲，收集用户的输入数据。从客户端角度来讲，向服务器提交数据的位置。本站搜索<input type="submit" name="button" id="button" value="搜索"></form>
如何使用HTML的表单来创建表单
2301_77795034的博客
04-30 863
上面的代码创建了一个包含三个输入字段、一个提交按钮和两个重置按钮的完整表单。我们还添加了两个提交按钮和两个重置按钮。通过为按钮添加不同的类名，我们可以更容易地区分它们。在HTML中，表单通常由两个部分组成：表单标签和表单元素。我们还可以在表单中添加其他元素，比如提交按钮、重置按钮、提示文本等等。表单标签是标记一个表单的开始和结束的标记，而表单元素是实现表单中特定功能的标签和元素，比如输入字段、提交按钮等等。现在，让我们来创建一个简单的表单吧！上面的代码创建了一个包含三个输入字段和一个提交按钮的简单表单。
HTML表单（详解网页表单如何实现）
最新发布
百赢出品，必属精品
04-24 2612
HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。元素用于为表单元素添加标签，提高可访问性。
Html创建表单
weixin_30763455的博客
02-13 283
echo Html::beginForm(['/site/logout'], 'post'); echo Html::submitButton(Yii::t('app', 'logout'), ['class' => 'btn btn-link']); echo Html::endForm() 转载于:https://www.cnblogs.com/yangyuqi...
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 8360
如何使用html制作一个简易的表格
HTML基础之创建简单表格
沃和莱特的博客
03-11 2043
HTML基础之创建简单的表单
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
m0_61869253的博客
09-07 3662
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
【自学html笔记】使用html创建表单＜input＞标签的使用
qq_51843898的博客
01-09 4658
input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单的使用方法

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一的学习笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值