HTML5创建表单

最新推荐文章于 2024-04-24 14:37:39 发布
最新推荐文章于 2024-04-24 14:37:39 发布
阅读量2.9k 收藏 16
点赞数 6
分类专栏： WEB前端学习 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44285092/article/details/108621216
版权

1 认识表单

  表单主要同于收集网页浏览者的相关信息，用。使用语法如下：

<from action="url" method="get|post" enctype="mime"></from>
  • action：用于处理提交表单的格式，它可以是一个URL地址或一个电子邮箱地址。
  • method：指明提交表单的HTTP方法。
  • enctype：指明用来把表单提交给服务器得到互联网媒体形式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识表单</title>
</head>
<body>
<form>
    下面是输入用户信息
    <br>
    用户名称
    <input type="text" name="user">
    <br>
    用户密码
    <input type="password" name="password">
    <br>
    <input type="submit" value="登录">
</form>
</body>
</html>

2 表单的基本元素的使用

2.1 单行文本输入框text的使用

  文本框用于访问者输入内容的表单对象，用来填写单个字或者简短的回答，如用户姓名和地址等。

<input type="text" name="..." size="..." maxlength="..." value="...">
属性值说明
type=“text”定义单行文本框
name定义文本框的名称，保证数据的准确采集，必须定义一个独一无二的名称
size定义文本框的宽度，单位为单个字符宽度
maxlenth定义最多输入的字符数
value定义文本框的初始值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行输入文本框</title>
</head>
<body>
<from>
    请输入您的姓名：<br>
    <input type="text" name="yourname" size="10" maxlength="20" value="张山"><br>
    请输入您的地址：<br>
    <input type="text" name = "adress" size="20" maxlength="20" value="北京">
</from>
</body>
</html>

2.2 多行文本框textarea的使用

  代码格式：

<textarea name="..." cols="..." rows="..." wrap="..."></textarea>
属性值说明
name定义多行文本框的名称，保证数据的准确采集，必须定义一个独一无二的名称
cols定义多行文本框的宽度，单位是单个字符宽度
rows定义多行文本框的高度，单位是单个字符宽度
wrap定义输入内容大于文本域时显示的方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文本输入框</title>
</head>
<body>
<from>
    请输入您的评价：<br>
    <textarea name="yourattiude" cols="50" rows="5" wrap="soft"></textarea>
    <br>
    <input type="submit" value="提交">
</from>
</body>
</html>

2.3 密码域password的使用

  用于输入一些保密信息，输入时显示一些黑点或其它符号，增加输入文本的安全性。语法如下：

<input type="password" name="..." size="..." maxlenth="...">
属性值说明
type=“password”定义密码框
name定义密码框的名称，保证唯一性
size定义密码框的宽度，单位是单个字符的宽度
maxlength定义最多输入的字符数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置密码输入框</title>
</head>
<body>
<from>
    用户名：<br>
    <input type="text" size="20" maxlength="20" name="username" >
    <br>
    登录密码：
    <br>
    <input type="password" name="password" size="20" maxlength="20" >
</from>
</body>
</html>

2.4 单选按钮radio的使用

  单选按钮主要是在网页浏览者在一组选项中只能选择一个选项。其使用方法如下：

<input type="radio" name="" value="">
属性值说明
type=“radio”定义单选按钮
name定义单选按钮名称，单选按钮都是以组为单位，在同一组中的单选都必须用同一名称
value定义单选按钮的值，在同一组中，他们的域值必须是不同的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置单选按钮</title>
</head>
<body>
<from>
    选择感兴趣的书：<br>
    <input type="radio" name="book" value="1">Python<br>
    <input type="radio" name="book" value="2">C++<br>
    <input type="radio" name="book" value="3">java<br>
    <input type="radio" name="book" value="4">html<br>
</from>
</body>
</html>

2.5 复选框checkbox的使用

  复选框主要是让访问者在同一组选项中可以选择多个选项。每个复选框都是一个独立元素，都必须有一个唯一的名称。语法如下：

<input type="checkbox" name=" " value=" ">
属性值说明
type=“checkbox”定义复选框
name定义复选框的名称，在同一组中复选框都必须用同一名称
value定义复选框的值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置复选框</title>
</head>
<body>
<from>
    选择感兴趣的方面：<br>
    <input type="checkbox" name="habbit" value="1">游泳<br>
    <input type="checkbox" name="habbit" value="1">健身<br>
    <input type="checkbox" name="habbit" value="2">健身<br>
    <input type="checkbox" name="habbit" value="3">健身<br>
    <input type="checkbox" name="habbit" value="4">健身<br>
</from>
</body>
</html>

2.6 下拉列框select的使用

  用于有限的空间设置多个选项。下拉列表框既可以单选，又可以用作复选。使用语法如下：

<select name=".." size=".." multiple>
    <option value=".." selected>
    ...
    </option>
    ...
</select>
属性值说明
name定义下拉列表框的名称
size定义下拉列表框的行数
multiple表示可以多选，如不设置，则只能单选
value定义选择项的值
selected表示默认已经选择本选项
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置下拉列表框</title>
</head>
<body>
<from>
    选择感兴趣的类型：
    <select name="cc" size="3" multiple>
        <option value="1" selected>网站开发1</option>
        <option value="2" selected>网站开发2</option>
        <option value="3" >网站开发3</option>
        <option value="4" >网站开发4</option>
        <option value="5" selected>网站开发5</option>
    </select>
</from>
</body>
</html>

注：按住Ctrl键实现多选。

2.7 普通按钮button的使用

  控制其他定义了处理脚本的处理工作，代码如下：

<input type="button" name=" " value=" " onClick=" ">
属性值说明
type=“button”定义普通按钮
name定义普通按钮名称
value定义按钮显示的文字
onClick表示单击行为，也可以为其他事件，通过制定脚本函数来定义按钮行为
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置普通按钮</title>
</head>
<body>
<form>
    点击下面按钮，把文本框1的内容拷贝到文本框2的内容中：
    <br>
    文本框1：<input type="text" id="1" value="学习HTML的技巧">
    <br>
    文本框2：<input type="text" id="2" value="学习HTML的技巧">
    <br>
    <input type="button" value="单击我" onclick="document.getElementById(2).value=document.getElementById(1).value">
</form>
</body>
</html>

2.8 提交按钮submit的使用

  将输入的信息提交到服务器，格式如下：

<input type="submit" name=".." value="..">
属性值说明
type=“submit”定义提交按钮
name定义提交按钮的名称
value定义提交按钮显示的文字

  通过提交按钮可以将表单里的信息提交到表单里action所指向的文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入用户信息</title>
</head>
<body>
<from action="http://www.yinhangit.com/yonghu.asp" method="get">
    请输入你的姓名：
    <input type="text" name="yourname"><br>
    请输入你的住址：
    <input type="text" name="youradr"><br>
    请输入你的pho：
    <input type="text" name="ponumber"><br>
    请输入你的单位：
    <input type="text" name="yourwork"><br>
    <input type="submit" value="提交">
</from>
</body>
</html>

2.9 重置按钮reset的使用

  重置按钮用来重置表单的输入信息，格式如下：

<input type="reset" name=" " value="">
属性值说明
type=“reset”定义重置按钮
name定义重置按钮名称
value定义重置按钮显示文字
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置</title>
</head>
<body>
<form>
    请输入用户名称：<input type="text"><br>
    请输入用户密码：<input type="password"><br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
</form>
</body>
</html>

3 表单高级元素的使用

3.1 url属性的应用

  url属性用于说明网站网址的，显示为一个文本段输入URL地址，提交表单时，会自动验证url的值。其使用格式如下：

<input type="url" name="userurl">
属性值说明
type=“url”定义url输入框
max(min)设置属性最大(小)值
value规定默认值
step设置合法的数字间隔
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>URL属性的应用</title>
</head>
<body>
<from>
    请输入网址：
    <input type="url" min="8" max="50" name="userurl" value="http://www.baidu.com">
    <input type="submit" name="enter" value="确认">
</from>
</body>
</html>

3.2 email属性的应用

  与url类似，email属性用于让浏览者输入email地址，提交表单时会自动验证email域的值。

3.3 date属性和time属性的应用

属性含义
date选取日、月、年
month选取月、年
week选取周年
time选取时间
datetime选取时间、日、月、年
datetime-local选取（本地）时间、日、月、年
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运用时间</title>
</head>
<body>
<from>
    <br>
    选择商品购买的时间
    <br>
    <input type="datetime-local" name="user_date">
</from>
</body>
</html>

3.4 number属性的应用

  提供数字输入类型，用户可以直接输入数字或者通过单击微调框中国的向上或者向下按钮选择数字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用nuber属性</title>
</head>
<body>
<form>
    此网站我曾来过
    <input type="number" name="sz" min="0" max="10" step="3">次了！
</form>
</body>
</html>

3.5 range属性的应用

  是一个滚动的控件，与number属性类似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用nuber属性</title>
</head>
<body>
<form>
    此网站我曾来过
    <input type="range" name="sz" min="0" max="10" step="1">次了！
</form>
</body>
</html>

注：默认情况置于中间，若指定最大最小值，则允许反向滚动轴。目前浏览器对这一属性还不能很好的支持。

3.6 required属性的应用

  规定必须在提交前填写区域不能为空，适用于text、serch、url、email、password、date、pickers、number、checkbox和radio等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置</title>
</head>
<body>
<form>
    请输入用户名称：<input type="text" required="required"><br>
    请输入用户密码：<input type="password" required="required"><br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
</form>
</body>
</html>

4 综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置</title>
</head>
<body>
<h1 align="center" >用户反馈页面</h1>
<form method="post">
    <p>姓&emsp;&emsp;名：<input type="text" size="12" maxlength="20" required="required"></p>
    <p>性&emsp;&emsp;别：<input type="radio" name="性别" value="male" required="required">男 <input type="radio" name="性别" value="female" required="required">女</p>
    <p>年&emsp;&emsp;龄：<input type="number" class=txt name="age" min="0" max="120"></p>
    <p>电子邮件：<input type="text"  name="email" required="required"></p>
    <p>请输入您对该网站的建议：<br>
    <textarea name="yourworks" rows="5" cols="50"></textarea><br>
    <input type="submit" name="submit" value="登录">
    <input type="reset" name="reset" value="重置">
     </p>
</form>
</body>
</html>
而又何羡乎
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5的表单
karry_yuan的博客
03-22 2474
感兴趣的可以来学习呀
HTML5中的表单
chenyiboke的博客
10-28 509
表单 1. 表单作用 用于显示、收集用户信息，并将信息提交给服务器 1. 表单元素-负责将用户数据提交给服务器 2. 表单控件-负责接收用户的数据（与用户进行数据交互） 2. 表单元素 1. 标记 <form></form> 2. 属性 1. action 定义表单被提交时的动作，主要就是服务器上处理数据的应用 程序URL 默认是提交给本页 2. meth...
HTML5——设计一个表单
万里顾一程的博客
11-02 3820
HTML5——设计一个表单 post和get提交 get方式提交：提交后可以在url中看到我们填写的信息（账号，密码等），会不安全，但是高效，不能传输大文件 post方式提交：不能看到我们填写的信息，比较安全，也可以传输大文件 要素 文本框 单选框和多选框 按钮 文本域和文件域 搜索滑框和简单验证 初级验证 <!DOCTYPE html> <html lang="en"> <head> <meta c
HTML5+CSS3+jquery制作个性注册表单代码
03-15
HTML5+CSS3+jquery制作个性注册表单代码
HTML表单（详解网页表单如何实现）
最新发布
百赢出品，必属精品
04-24 2096
HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。元素用于为表单元素添加标签，提高可访问性。
html5学习16：表单
八十岁老将的博客
02-07 649
1、制作基本表单 制作一个基本的表单需要三个元素: form、input和button元素。 <form method="post" action="http://titan:8080/form"> <input name="fave"/> <button> Submit vote </button> </form> 1.1 定义表单 1）form元素 可以流元素的元素的子元素，但form元素不能是其他fo
设计HTML5表单
布道师小羊的博客
08-15 1937
一文读懂HTML表单设计！
如何使用HTML的表单来创建表单
2301_77795034的博客
04-30 851
上面的代码创建了一个包含三个输入字段、一个提交按钮和两个重置按钮的完整表单。我们还添加了两个提交按钮和两个重置按钮。通过为按钮添加不同的类名，我们可以更容易地区分它们。在HTML中，表单通常由两个部分组成：表单标签和表单元素。我们还可以在表单中添加其他元素，比如提交按钮、重置按钮、提示文本等等。表单标签是标记一个表单的开始和结束的标记，而表单元素是实现表单中特定功能的标签和元素，比如输入字段、提交按钮等等。现在，让我们来创建一个简单的表单吧！上面的代码创建了一个包含三个输入字段和一个提交按钮的简单表单。
表单的基础语法
weixin_71643873的博客
06-29 268
..... 男女使用场景：多个选项最多只能选一个备注：1.多个选项只选其中一项时，每个单选框的name值必须一致2.必须要有v
HTML5&CSS3网页制作：创建表单.pptx
05-31
创建表单 创建表单 01 创建表单 在HTML5中，<form></form>标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form></form>中的所有内容都会被提交给服务器。 描述 语法格式 地址" method="提交...
html5表单及新增的改良元素详解
09-27
HTML5在传统的HTML4.01基础上对表单功能进行了大幅度的增强和改进，使得网页开发者能够构建更强大、更具交互性的用户界面。本文将详细解析HTML5中...在创建现代Web应用程序时，掌握这些HTML5表单的新特性是至关重要的。
使用HTML5和CSS3表单验证功能
09-27
接下来，我们需要创建表单的基本结构。一个简单的HTML5声明是`<!DOCTYPE html>`，然后设置charset为UTF-8，创建form元素，并通过`onsubmit`事件阻止默认的提交行为，这样我们可以在JavaScript中处理验证逻辑。 在...
html5formgenerator:创建 HTML5 表单的简单方法
07-02
通过使用我们的 html5 表单生成器，任何人都可以使用 html5 和 css3 以简单的方式创建 html 表单。 每当使用 html5 和 css3 代码进行正常的 html 表单设计时，您需要多次完成它并且在开发过程中可能会出现许多问题...
HTML5表单验证
02-11
使用 创建一个index.html文件，并通过使用以下命令运行Web服务器来实时查看该文件： $ pip3 install flask && python3 server.py 您可以创建任意数量HTML文件 您还可以创建CSS文件，并可以使用位于<head>&...
HTML5表单的学习代码
weixin_44034883的博客
01-19 637
HTML5表单的学习 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http
h5 表单
weixin_42595284的博客
09-03 1344
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; fieldset{ width: 50
H5 设计简单表单
zuo_zuo_blog的博客
03-27 2895
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100%; ...
HTML5权威指南——表单
gyypwrs的博客
10-25 295
复习以前写的文章发现一大段一大段的话我自己都不想读下去，从这一篇往后，我就将一些要点像无序列表的样子呈现了。 制作基本表单 制作基本表单就依靠三个元素form，input，button元素。form元素告诉浏览器现在是一个HTML表单了。input元素用来收集用户的输入数据。button元素的作用就是告诉浏览器输入完毕啦，该把我发到服务器了。 这样写就生成一个简单的表单了。 <form> <input placeholder="请输入···"> <button&
HTML5中表单代码有,HTML5表单(示例代码)
weixin_35943736的博客
06-26 1018
新增的input输入类型HTML5中增加了表单方面的诸多功能，包括增加input输入类型、表单元素、form属性和input属性等。新的input输入类型email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值，如果不是一个有效的E-mail地址，该输入框不允许提交该表单。url类型的input元素提供用于输入url地址这类特殊...
用HTML创建一个表单
04-07
好的，以下是使用HTML创建一个表单的基本代码： ```html <form action="submit.php" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="user_name"><br> <label for="email">Email:</label> <input type="email" id="email" name="user_email"><br> <input type="submit" value="Submit"> </form> ``` 这个表单包括了用户输入姓名和电子邮件地址的文本框，以及一个提交按钮。当用户点击提交按钮时，表单数据会被发送到名为"submit.php"的处理脚本。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

而又何羡乎

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

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

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

打赏作者

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

抵扣说明：

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

余额充值