HTML表单标签

最新推荐文章于 2024-09-15 10:24:49 发布
最新推荐文章于 2024-09-15 10:24:49 发布
阅读量744 收藏 29
点赞数 20
分类专栏： 前端 文章标签： html 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WHabc2002/article/details/139674454
版权

目录

1.表单标签的介绍

 2.input 标签

2.1 文本框

2.2密码框

 2.3单选框

 2.4复选框

 2.5按钮

2.5.1普通按钮

 2.5.2提交按钮

 ​编辑2.5.3清空按钮

2.6选择文件 

2.7日期 

 3.select 标签

4.textarea 标签

5.最终效果

1.表单标签的介绍

表单一般用来收集用户的输入信息 , 并将数据传输到服务器，从而实现用户与 Web 服务器的交互。 
<form action="test.html">
   ... [form 的内容]
</form>

样例代码：

 <form action="https://www.baidu.com/s"method="get">
    <input type="text"name="wd"/>
     <input type="submit"value="按钮"/>
 </form>

   显示效果： 

说明：

1.action: 表单提交到哪

2.method: 表单的提交方式 POST或GET，默认值是GET。 

get和post 有什么区别呢？

get:表单信息以明文方式发送（非安全），网址长度不能超过2048个字符。

post:表单信息存在HTTP请求正文中，不限长度，可以发送大量数据。

仅看url：

GET 方式提交表单时，表单内容会以键值对的形式显示在路径中；、
POST 方式提交表单时，路径中不会显示表单内容。

 2.input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

属性介绍：

1.type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等

2.name属性: 表单提交项的键,给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.

3. value属性: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同

type 的内容
value 属性的作用
type="button", "reset", "submit"
定义按钮上的显示的文本
type="text", "password", "hidden"
定义输入字段的初始值
type="checkbox", "radio", "image"
定义与输入相关联的值
4.checked: 默认被选中 . ( 用于单选按钮和多选按钮 )
5.maxlength: 设定最大长度 .
我们采取逐一添加的方式，来介绍 type

2.1 文本框

<input type = "text" >

样例代码

<body>
    <h3>调查问卷</h3>
    <p>姓名:<input type="text"name="userName"placeholder="请输入用户名"></p>
</body>

 说明：

placeholder可以在表单元素中显示一段提示文本,告诉用户该输入什么内容。

   显示效果：

2.2密码框

<input type="password">

 样例代码

<body>
    <h3>调查问卷</h3>
    <p>姓名:<input type="text"name="userName"placeholder="请输入用户名"></p>
    <p>密码:<input type="password"name="password"placeholder="请输入用户名"></p>
</body>

   显示效果：

 2.3单选框

性别 :
<input type = "radio" name = "sex" > 男
<input type = "radio" name = "sex" checked = "checked" > 女

具有相同的 name 才能多选一 

checked: 默认被选中

 样例代码

<body>
    <h3>调查问卷</h3>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
</body>

   显示效果：

如果代码这么写：

 

点击两次，代码从上往下解析

显示效果：

 

 2.4复选框

爱好 :
<input type = "checkbox" > 吃饭 <input type = "checkbox" > 睡觉 <input type = "checkbox" >
打游戏

  样例代码

<body>
    <h3>调查问卷</h3>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
    <p>
        爱好:<input type="checkbox"name="hobby">吃饭
             <input type="checkbox"name="hobby">睡觉
             <input type="checkbox"name="hobby">打游戏
    </p>
</body>

显示效果：

 2.5按钮

2.5.1普通按钮

<input type="button" value="我是个按钮">

当前点击了没有反应. 需要搭配 JS 使用

   样例代码

<body>
    <h3>调查问卷</h3>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
    <p>
        爱好:<input type="checkbox"name="hobby">吃饭
             <input type="checkbox"name="hobby">睡觉
             <input type="checkbox"name="hobby">打游戏
    </p>
    <p>
        <input type="button" value="确认">
    </p>
</body>

显示效果：

 2.5.2提交按钮

<form action = "test.html" >
    <input type = "text" name = "username" >
    <input type = "submit" value = " 提交 " >
</form>

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

 2.5.3清空按钮

<form action = "test.html" >
    <input type = "text" name = "username" >
    <input type = "submit" value = " 提交 " >
    <input type = "reset" value = " 清空 " >
</form>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.  

2.6选择文件 

<input type = "file" >

样例代码

<body>
    <h3>调查问卷</h3>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
    <p>
        爱好:<input type="checkbox"name="hobby">吃饭
             <input type="checkbox"name="hobby">睡觉
             <input type="checkbox"name="hobby">打游戏
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="button" value="确认">
    </p>
</body>

显示效果：

2.7日期 

<input type="date">

 样例代码

<body>
    <h3>调查问卷</h3>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
    <p>
        爱好:<input type="checkbox"name="hobby">吃饭
             <input type="checkbox"name="hobby">睡觉
             <input type="checkbox"name="hobby">打游戏
    </p>
    <p>
        生日:<input type="date">
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="button" value="确认">
    </p>
</body>

显示效果：

小结：

 

 3.select 标签

<select>
    <option> 北京 </option>
    <option selected = "selected" > 上海 </option>
</select>
1.<select> 下拉选标签属性 :
                 name: 表单提交项的键
                 size ：窗口同时展示的选项个数
                multiple：可同时选择多个选项
2.<optgroup> 为每一项加上分组
3.<option> 下拉选中的每一项 属性：
               value: 表单提交项的值
                selected: selected 默认被选中

 样例代码

<body>
    <h3>调查问卷</h3>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
    <p>
        爱好:<input type="checkbox"name="hobby">吃饭
             <input type="checkbox"name="hobby">睡觉
             <input type="checkbox"name="hobby">打游戏
    </p>
    <p>
        生日:<input type="date">
    </p>
    <p>
        地区:<select>
                <option>A区</option>
                 <option>B区</option>
                 <option selected="selected">C区</option>
                 <option>D区</option>
                 <option>E区</option>
        </select>
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="button" value="确认">
    </p>
</body>

显示效果：

4.textarea 标签

文本区

<textarea rows = "3" cols = "50" >
   
</textarea>

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.

 rows 和 cols 也都不会直接使用, 都是用 css 来改的.

  样例代码

<body>
    <h3>调查问卷</h3>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
    <p>
        爱好:<input type="checkbox"name="hobby">吃饭
             <input type="checkbox"name="hobby">睡觉
             <input type="checkbox"name="hobby">打游戏
    </p>
    <p>
        生日:<input type="date">
    </p>
    <p>
        地区:<select>
                <option>A区</option>
                 <option>B区</option>
                 <option selected="selected">C区</option>
                 <option>D区</option>
                 <option>E区</option>
        </select>
    </p>
    <h5>建议：</h5>
    <textarea rows="10" cols="50">

    </textarea>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="button" value="确认">
    </p>
</body>

显示效果

5.最终效果

加个边框

 <fieldset style="width:？;">
        <legend>？</legend>

</fieldset>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调查问卷</title>
</head>
<body>
    <fieldset style="width:20%;">
        <legend>调查问卷</legend>
    <p>
        姓名:<input type="text"name="userName"placeholder="请输入用户名">
    </p>
    <p>
        密码:<input type="password"name="password"placeholder="请输入用户名">
    </p>
    <p>
        性别:<input type="radio"name="sex"checked="checked">男
             <input type="radio"name="sex">女
    </p>
    <p>
        爱好:<input type="checkbox"name="hobby">吃饭
             <input type="checkbox"name="hobby">睡觉
             <input type="checkbox"name="hobby">打游戏
    </p>
    <p>
        生日:<input type="date">
    </p>
    <p>
        地区:<select>
                <option>A区</option>
                 <option>B区</option>
                 <option selected="selected">C区</option>
                 <option>D区</option>
                 <option>E区</option>
        </select>
    </p>
    <h5>建议：</h5>
    <textarea rows="10" cols="50">

    </textarea>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="button" value="确认">
    </p>
</fieldset>
</body>
</html>

最终效果：

以上为我个人的小分享，如有问题，欢迎讨论！！！ 

都看到这了，不如关注一下，给个免费的赞 

 

WH牛
关注
专栏目录
HTML 表单标签
weixin_45904557的博客
02-28 8142
一、什么是表单标签 表单是用来采集用户的输入数据，然后将数据提交给服务器 二、表单的组成 一个表单有三个基本组成部分： ①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 ②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 ③表单按钮：包括提交按钮、复位按钮和一般按钮； 三、表单标签 表单标签＜form＞＜/form＞ 功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据
html表单标签与表单设计
z55947810的博客
04-17 4921
刚刚接触前端的HTML，练习并记录程序。 下面是对HTML表格的整理并总和在一起做的一个小练习。 IDE：VScode 主要框架是自动生成的，body内为自己编写内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view...
HTML表单标签 input
BambooStrip的博客
08-24 1579
HTML表单标签 input
HTML系列之表单标签
StayAlive1887的博客
07-01 1471
表单用于收集用户的输入信息，如我们常看见的登录页面，需要用户输入账号和密码，这时候，我们要拿到用户输入的账号和密码，就需要使用表单标签。密码：用户名：
html中的表单标签
weixin_51182359的博客
04-23 3508
html 中的表单标签介绍
marked-forms:从markdown生成html表单标签和输入控件
05-07
Marked.js插件，用于从markdown生成HTML表单输入。 从诸如[text ?input?](name)类的markdown链接生成标签和输入控件。 安装 npm install marked-forms 重大变化 从v3.0.0版本开始，该库使用插件api。 从v4.0.0...
HTML常用标签之表单标签
m0_54866636的博客
02-26 6944
HTML常用标签之表单标签 前言 一、表单域 二、表单元素 1.input 输入表单元素 2.select 下拉表单元素 3.textarea 表单元素 前言 在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签 在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成 一、表单域 表单域是一个包含表单元素的区域 在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递 <form>会把它范围内的表单
前端用html写excel文件直接打开
全易
09-10 816
html文件直接用excel打开
HTML、CSS实现树状图
p_s_p的博客
09-09 784
【代码】HTML、CSS实现树状图。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 975
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
在IntelliJ IDEA中创建一个HTML项目
最新发布
shiming8879的博客
09-15 1307
在IntelliJ IDEA中创建一个HTML项目是一个相对直接的过程，尽管IDEA本身是一个功能强大的Java集成开发环境（IDE），但它也支持Web开发，包括HTML、CSS、JavaScript等前端技术的开发。以下是一个详细的步骤指南，解释了如何在IntelliJ IDEA中创建一个HTML项目，并涵盖了一些基本的前端开发实践。
炫酷HTML蜘蛛侠登录页面
bjjgff的博客
09-14 1342
全篇使用HTML、CSS、JavaScript，建议有过基础的进行阅读。
HTML中的文字与分区标记
qq_74861982的博客
09-11 590
HTML中的文字与分区标记
html加载界面发送ajax请求
qq_38880880的博客
09-11 388
【代码】html加载界面发送ajax请求。
requests-html的详细使用方法
2301_79698214的博客
09-11 456
requests-html是一个Python库，用于发送HTTP请求并解析HTML。它基于 requests 和 pyquery 库，提供了一种更简单和更方便的方式来获取和处理网页内容。以上是requests-html的一些常用使用方法，可以根据实际需求灵活使用。
Python文本数据切分及HTML数据处理
NLP与推荐算法
09-14 206
a class="lawregu_link" lawregu-detail lawreguid="8dbb3944e7943feda57a0a71be705910" lawregutiao="第四十八条">《中华人民共和国妇女权益保障法》第四十八条</a>规定，用人单位不得因结婚、怀孕、产假、哺乳等情形，辞退女职工或单方解除劳动合同。注意，这里的示例是基于中文的句号来切分的，对于其他语言可能需要调整正则表达式的匹配规则。在这个例子中，我们要移除的是形如<a ...>的HTML标签。# 移除HTML标签。
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 463
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
SpringMVC表单标签详解与使用
在SpringMVC框架中，开发者可以利用一系列预定义的表单标签来简化HTML表单的创建和数据绑定过程。这些标签可以从ModelMap中直接访问数据，使得与后端模型的交互更为便捷。在开始深入探讨SpringMVC的表单标签之前，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值