html 表单标签+输入框的讲解与代码

于 2024-09-23 23:04:16 发布
阅读量269 收藏 3
点赞数 2
文章标签： javascript 前端 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81325634/article/details/142470875
版权

目录

一. 表单标签 <form>

二. 输入标签(文本框) <input>

三. 作业（表格样式+表单按钮样式）

一.表单标签 <form>

```js
    1. 属性：
        ① name/id :表单的名称
        ② action
        ③ method :表单数据提交方式-get(默认)/post
```

二.输入标签(文本框) <input>

```js
    1. 提示词 placeholder="提示词"
        <input value="" placeholder="用户名">
    
    2. 单选框 radio
        <input type="radio" name="" value="" >
        **在单选性别时，要注意给name添值 name="gender" 两个都要一样
        **或者其他方法：使用<lable>标签

    3. 复选框 checkbox
        <input type="checkbox">
    
    4. 下拉框 
        <select name="" id="">
            <option value=""> </option>
        </select>
    5. 多行文本 textarea
        <textarea name="" id=""></textarea>
    
    6. 文件 file
        <input type="file">

    7. 日历 data
        <input type="date">
    
    8. 系统时间
        <input type="date-local">
    
    9. 隐藏 hidden

    10. 按钮
        重置 reset
        提交 submit
        按钮 button

```

三.作业（表格样式+表单按钮样式）

表格高亮样式

  1. 图片显示 表格高亮
  2. 表格样式
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格高亮</title>
    <style>
        table,th,td{
            border: 1px solid black;
            border-collapse: collapse;
        }
        tr:hover{
            background-color: aquamarine;
        }
        td:hover{
            color: cornflowerblue;
        }
        th:hover{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>      

        </tr>
        <tr>
            <td>美术</td>
            <td></td>
            <td>美术</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>语文</td>
            <td></td>
            <td>数学</td>
        </tr>
        <tr>
            <td>历史</td>
            <td>政治</td>
            <td>历史</td>
            <td>政治</td>
            <td>政治</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>体育</td>
            <td></td>
            <td>体育</td>
            <td>体育</td>
        </tr>
        <tr>
            <td></td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        
        
        
    </table>
</body>
</html>

表单按钮样式

  1. 图片显示 按钮样式
  2. 主要代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单按钮</title>
    <style>
        input{
            width: 90px;
            height: 40px;
            border-radius: 5px;
        }
        .Primary{
            
            border: none;
            background-color: rgb(60, 101, 223);
            color: white;
        }
        .Default{
            border: 1px solid grey;
        }

        .Dashed{
           border: 1px dashed grey;
        }
        .Danger{
            border: 1px solid red;
            color: red;
            
        }
        .Link{
            border: none;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <form action="">
        <input class="Primary" type="button" value="Primary">
        <input class="Default" type="button" value="Default">
        <input class="Dashed" type="button" value="Dashed">
        <input class="Danger" type="button" value="Danger">
        <input class="Link" type="button" value="Link">
      
    </form>
</body>
</html>
克里维斯的明天.
关注
HTML中input输入框（详解输入框的用法）
百赢出品，必属精品
04-30 1万+
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
HTML 使用表单标签实现注册页面的实例代码
12-14
案例说明：　　　   　　　　- 使用表格实现页面效果  　　　　- 超链接不想要有效果，使用href="#" 　　　　- 如果表格里面的单元格没有内容，使用空格作为占位符   　　　　- 使用图片标签提交表单 <input type="image" src="图片的路径"/>   完整代码：   <html> <head> <title>World</title> </head> <body> <form action="01-hello.html" method="post"> <h3 align=
HTML常见标签——文本输入域textarea标签
weixin_64294248的博客
07-17 381
textarea行内块元素，在同一行显示,可以设置宽高，留言、发微博、发朋友圈可以用标签，标签是双标签。此时用户可以拖拽输入框，如果想要设置用户不能拖拽文本输入框，则设置resize: none;textarea也有placeholder属性，可以设置提示内容。
HTML表格、表单、标签、CSS、选择器
最新发布
2301_80034711的博客
08-11 1446
时，会自动聚焦到其绑定的标签。内联样式微辣用户名辣
html5 input各种type
大人的技术博客
09-15 845
for search boxes for spinboxes for sliders for color pickers for telephone numbers for web addresses for email addresses for c
用html代码制作一个表单页面,HTML网页表单制作详细讲解
weixin_39747975的博客
06-04 5596
表单是一个网站和访问者开展互动的窗口，我们现在就给大家介绍一下表单的一些基本知识和表单美化方法。初识表单表单可以用来在网页中发送数据，特别是经常被用在联系表单-用户输入信息然后发送到Email中。表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML，你能够自助地找到一些简单的教程，开发一个服务器端的程序使一个发送到Email的表...
HTML便签大全
a881127b的专栏
08-25 619
1.1 字体样式的应用 　　字体样式包括：字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font)，具体的定义方法，在这里不详细讲述，可以参考它的资料。 　　也许你已经注意到，按钮上的文字不漂亮，其实可以通过CSS字体样式来解决，同样地，其它的几个涉及到文...
HTML表单元素-输入框
热门推荐
前端队长Daotin
11-06 1万+
2、表单元素-输入框输入框使用input标签。<input>标签，根据type属性的不同，会有不同的表现样式。默认type="text"，也就是文本输入框。2.1、文本输入框单行的文本区域，（输入中的换行会被自动去除）。<input type="text" name="username" maxlength="6" readonly="readonly" ...
HTML 表单元素的基本样式
歪脖先生的博客
02-22 5750
表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等，以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同，input 元素又包括 text、password、radio、checkbod、file、submit、reset、search、tel、u...
HTML的表单样式
Raccon_的博客
11-22 941
HTML5 表单 <from method="get/post(更安全) action="传给谁>    <input type="text(文本)/password(密码)/submit(提交按钮)/radio(单选)/checkbox(多选)/button(单纯按钮)/file(文件上传)/hidden(隐藏的输入字段)/image(图像形式的提交按钮)/reset(重置按钮)> ​ 其他属性:value="值 ​ name="名称 ​
模仿password输入框的实现代码
09-02
本篇文章将详细讲解如何通过JavaScript实现这样一个模仿`password`输入框的功能。 首先，我们需要HTML结构来创建输入框。这里有两个输入元素，一个是可见的`<input type="text">`，用于显示星号或其它遮罩字符，另...
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2341
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
HTML 表单、样式
weixin_33709590的博客
03-12 161
目录：1.<form>2.<head>3.<embed>1.form　　创建表单，使用<form>标签。表单的作用是向服务器传输数据，实现用户交互。标签中包含input、menus、textarea、fieldset、label等元素。1.1.表单基本实现　　点击submit按钮时提交表单，就是把form中所有input的信息以...
html类样式表,html表单样式
weixin_28786293的博客
06-03 510
html中如何设置form大小首先打开hbuilder编辑器，新建一个html文件，写一个form表单，并设置class属性值，form中设置两个input标签：然后在上方的style标签中设置form的样式，在form的class属性中设置宽高属性，以px为单位设置宽高，背景颜色设置另一种颜色。html表单中如何设置字体属性之类的?直接给表单中对应的元素设置相应的css样式就是可以实现设置字体等...
html 表单样式化例子
学习笔记
02-23 356
油鹳上的视频 代码地址： https://github.com/codingmarket07/Registration-form-D19 Html code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
html-form表单
Black_Straight的博客
06-01 210
html-form表单
html form 表单
且听风吟的博客
07-15 6026
html form 表单
HTML Form表单
量子波动猫的博客
05-29 214
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值