html表单标签学习

最新推荐文章于 2022-02-27 18:48:06 发布
最新推荐文章于 2022-02-27 18:48:06 发布
阅读量241 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42322106/article/details/81089682
版权

学习html的第三天，今天的学习内容是表单标签，下面想分享一些相关知识，打卡打卡ing

1、 什么是表单？
    表单标签使用<form>表示
    a.表单是用于收集用户输入的数据信息
    b.表单的每一个输入项叫表单域
    c. 表单元素是不可见的

2、表单元素

文本框         text

密码框         password

单选项         radio

复选项         checkbox

普通按钮       button

提交按钮       submit

重置按钮       reset

图片按钮       image

列表框         select  option

多行文本框     textarea

文件域          file

2、表单语义化

语义化的目标是为了页面结构更加合理 在网页设计和开发过程中，使用语义化的标签，能够达到见名知义的作用

语义化的结构，更加符合Web标准，更利于搜索引擎的抓取（SEO的优化）和开发维护

3、需知

表单主要用来制作动态网页，方便和用户进行交互。

常用的表单元素有文本框、密码框、单选按钮、复选框、列表框、按钮、多行文本框。

使用<label>标签的for属性与表单元素的id属性相结合控制单击该标签时，对应的表单元素自动获得焦点或者被选中。

表单元素的只读和禁用属性为readonly和disabled 

4、表单元素标注
   作用：
      a. 增强鼠标的可用性
      b. 自动将焦点转移到与该标签对应的标注上

    基本语法：
      <label for="表单元素id">标注文本</label>
      <input id="表单元素id" type="radio"/>音频

5、个人总结

在表单标签实现中，网页显示内容始终在<body></body>中写

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<form method="post" action="名称.html" style="line-height:25px;">

  <table cellspacing="0" cellpadding="0"> 

<fieldset>       <!- -域-->

<legend>标题</legend>     <！--域标题-- >

<tr>

<td><input type="text"id="text"name="text"style="width: 此处根据情况自己写"></td>

</tr>

<tr>

  <td>密码框</td>

  <td><input type="password" id="pwd" name="pwd" style="width: 此处根据实际情况写"></td>

</tr>

     <tr>

         <td>单选按钮</td>

         <td><input type="radio" id="r1" name="r1" value="A" >A

            <input type="radio" id="r2" name="r2" value="B" >B</td>

     </tr>

 

<tr>

  <td>多选按钮</td>

<td><input type="checkbox" name="book" value="C1">C1

  <input type="checkbox" name="book" value="C2">C2</td>

  </tr>

 <tr>

   <td>重置表单数据</td>

  <td><input type="reset" value="重置"> </td>

     </tr>

 <tr>

  <td>提交按钮</td>

  <td><input type="submit" name="submit"  value="提交" ></td>

     </tr>

 

<tr>

<td>图形按钮</td>

  <td><input type="image" src="../img/a1.png" value="图形按钮"></td>

     </tr>

<tr>

 <td>普通按钮</td>

   <td><input type="button"  value="普通按钮" disabled></td>

     </tr>

     

<tr>

    <td>下拉列表</td>

    <td>

    <select>

     <option>a</option>

     <option>b</option>

     <option>c</option>

     </select>

      </td>

     </tr>

<tr>

   <td>文本区域</td>

   <td><textarea rowspan="文本区域跨了多少行" colspan="跨的列数" οnfοcus="this.value=''">文本区域后框框里写的内容</textarea></td>

 </tr>

 </table>

</form>

</body>

</html>

今天的学习过程中没有出现什么小问题，不再因为中英文输入法而出错，打代码也熟练了一些，知识出现了一个大问题，网页的图片没办法显示出来，现在还没解决好，脑壳疼。个人觉得，不管是表格还是表单标签，都是在html的基本结构式添枝加叶而已，只要你熟悉所要实现的功能的语法和规则，在对的位置上添加上去就好了，分成一个个小版块，再复杂的代码也会变得简单，只需要用心和时间而已，加油！！！！

 

 

雁宝呀
关注
关于表单（form）设计的学习
Jener
12-05 758
背景     一直以来，我发觉自己非常缺乏设计天分，不说网页色彩搭配，我发觉自己连设计一个简单的、整洁的表单都十分吃力。幸运的是，我在学校图书馆发现了《Web表单设计：创建高可用性的网页表单》这本书，因此就如获至宝认真看起，断断续续的把整本书都浏览了下。对了，确切地说，这是本设计思想指导的书，不谈技术。      书本中最让我长知识的是，书本提出了关于构建表单的三层理论：关系、对话和外观。
HTML学习笔记--表单标签
lhmlxc1314的博客
11-30 250
HTML学习笔记–表单标签 文章目录HTML学习笔记--表单标签input标签及其type属性input标签运用场景标签名type属性值及其说明type的text值相关常用属性代码展示运行效果type的radio值相关常用属性代码展示运行效果type的checkbox值相关常用属性代码展示效果展示type的file值相关常用属性代码展示效果展示三个type属性值——按钮代码展示效果展示select下拉菜单使用场景标签名及用法常见相关属性代码展示运行效果展示textarea文本域标签使用场景textare标签
HTML学习之表单
chunlovenan的专栏
09-09 1004
HTML表单 表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。   1、name：   设置表单的名称。   2、action：  设置表单的处理程序的URL。   3、method：提交表单的方法。 HTML    表单中常用的标记： 输入域一般在表单中使用 1、输入单行文字 2、输入密码 3、单选按钮 4、多选按钮 5、图片
HTML学习—表单
我要变强( ¯ □ ¯ )
06-29 592
最近做的小项目需要搭建一个小网站，因此从慕课网 上学习HTML+CSS的基础知识，接触到的知识点用这个博客总结出来。
HTML之form表单标签的学习
David_house的博客
10-12 844
form表单标签from表单form表单域 from表单 表示：<form>form表单域</form> 作用：收集并替提交用户数据给指定服务器 属性 action：收集的数据的提交地址（也就是URL） method：收集的数据的提交方式 其中提交方式有两种：get和post get： 适合小量数据，提交的表单数据以？隔开拼接在URL后面，不同的数据的键值对使用&符号隔开，不安全 post： 适合大量数据 ，隐式提交， 安全 form表单标签的使用 在点击提交数据时
HTML表单标签
近未来
02-23 946
表单标签form 表单标签：form 属性： action:提交到地址url method：提交方式 1）get方式 2）post方式 input标签中必填的属性： name属性：给后台标记当前input标签中的内容 ge...
HTML的form表单标签用法学习教程
12-13
HTML中表单可以用来搜集用户各种类型的输入信息。表单实际上是包含表单元素的区域，在这个区域中的各种元素的输入信息最终都将通过表单提交到程序脚本中...多数情况下被用到的表单标签是输入标签（<input>）。输
XHTML入门学习教程:表单标签
12-29
表单标签<form> 表单以一个<form>标签开始。用户注册网站会员，投票等等都需要表单来实现。当然了，仅仅依靠XHTML是无法处理这些表单的，如果你想处理这些表但你需要使用一些类似PHP和ASP的网页后台技术...
前端学习 FreeCodeCamp html 注册表单
最新发布
03-20
本教程将聚焦于FreeCodeCamp提供的HTML注册表单的学习，旨在帮助初学者掌握创建交互式用户输入界面的核心技术。 首先，我们来看`index.html`文件。这个文件是网页的主要源代码，包含了所有HTML标记。一个基本的HTML...
表单标签的学习笔记
qq_66198247的博客
01-15 584
一.表单的组成 在HTML中，一个完整的表单通常由表单域，表单控件（也称为表单元素）和提示信息三个部分组成。 <form></form>标记被用于定义表单域，即创建一个表单，<form></form>中所有内容都会被交给服务器。 常用属性： 1.action：用于指定接受并处理表单数据的服务器程序的url地址，例如：<form action=“form_action.asp”> 2.method:设置表单数据的提交方式，其取.
html表单—学习总结
qq_36111690的博客
02-27 516
显示结果： <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>Form</title> </head> <body> <!--method 属性规定在提交表单时所用的 HTTP 方法（GET 或...
HTML网页表单学习（全方面详解）
qq_47897078的博客
12-15 1302
HTML网页表单 表单元素格式 属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text name 指定表单元素的名称 value 元素的初始值。type为radio时必须指定一个值 size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 maxlength type为
表单的学习
m0_67421143的博客
02-27 123
HTML 表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置: <form> .input 元素 . </form> HTML 表单 - 输入元素 多数情况下被用到的表单标签是输入标签（<input>）。 输入类型是由类型属性（type）定义的。大多数经常被用到的
Html表单学习经典例子
小罗
08-15 622
登陆 账号： 密码: 性别：男 女 爱好：足球 篮球 隐藏： 下拉选择: 请选择 上海 广州 文本域： 这里输入
表单学习及练习
mover999的博客
05-25 696
这篇博客是我对form标签学习的一些认识。首先，最重要的是form不是from。在学习过程中注意到一些问题1.name，这个东西随便编，但是不准写汉字2.value：这个标签的内容比较广泛。根据你的内容相机而变。type="button", "reset", "submit" - 定义按钮上的显示的文本type="text", "password", "hidden" - 定义输入字段的初
表单学习form
lucky___dog的博客
07-31 323
html5-表单学习 表单：前后台交互的入口；用户通过表单把数据传送给后台，后台再把数据交给数据库。 三种形式/用法： 登录页面 登录页面 搜索框（百度一下） form 属性：action（后台接口地址） method（请求方式） enctype （编码方式） <!-- 指向后台的接口地址 --> <form action="http://134.175.154.93:80...
表单标签学习
qq_42788101的博客
05-21 214
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <h2>多行文本框：</h2> <textarea name=...
表单的使用（新手入门基础学习）
yp320645的博客
07-09 518
4.表单的定义 表单是什么，其作用是什么？我们首先要先弄清楚概念，我所理解的表单就是收集用户填写的信息并将其提交到后台服务器。前者是概念，后者是作用。 4.1表单的属性以及表单的提交方式get和post区别 《from标签》 表单有两种属性：如下 Action属性：指定提交的地址； Method属性：指定提交的方式，get/post。 而get/post的区别在于： 作用上：G
HTML基础教程：学习FORM标签与表单提交
创建一个基本的HTML表单，可以使用以下代码示例： ```html <!-- 在这里添加表单元素，如文本框、选择框、按钮等 --> 用户名"> 密码"> 提交"> ``` 表单中的控件，如`<INPUT>`、`<SELECT>`、`<TEXTAREA>`等，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值