web前端学习2-html表单

r囧r小猫 2023-02-17 03:55 71阅读 0赞

学习2-表单

表单1

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>表单元素（上）</title>
  6.     </head>
  7.     <body>
  8.         <form><!-- 用于为用户输入创建html表单 -->
  9.             <!-- 单行文本框 --><!--input type属性值默认为text，设不设text都一样 -->
  10.             <!-- input是用于收集用户输入信息的表单 -->
  11.             <!-- input的type属性很重要，type值决定了input的类型 -->
  12.             <!-- text值是单纯的文本，没有限制 -->
  13.             <input type="text">
  14.             <!-- password值-限制输入内容且将内容浏览加密，
  15.             在文本框不可见，但在上传数据的时候还是以原数据上传，
  16.             非加密数据，仅仅是掩盖掉在界面的显示 -->
  17.             <input type="password"/>
  19.             <!-- value的值是文本输入框的初始值 -->
  20.             <input value="文本值"/>
  21.             <!-- placeholder为提示，而非文本值 -->
  22.             <input placeholder="提示信息"/>
  23.             <!-- maxlength限制输入字符长度 -->
  24.             <input maxlength="5" placeholder="只能输入五个字符"/><br/>
  25.             <!-- 文本框的长度为25个字符长度 -->
  26.             <input placeholder="尺寸" size="25"/>
  27.             <!-- 只读属性 -->
  28.             <input value="readonly" readonly/>
  29.             <!-- 文本域 -->
  30.             <!-- 一般可以在浏览界面拖动右下角图表控制
  31.             文本域框大小，据我测试谷歌浏览器可以由这个效果，
  32.             QQ浏览器和IE浏览器没有这个效果 -->
  33.             <!-- rows高度，cols宽度 -->
  34.             <textarea value="这是个文本域" rows="100" cols="0"></textarea>
  35.         </form>
  36.     </body>
  37. </html>

表单1浏览

表单2

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>表单元素（中）</title>
  6.     </head>
  7.     <body>
  8.         <!-- form表单元素是用来获取用户输入数据所需的 -->
  9.         <form>
  10.             <!-- inpur"button"的值并不是写在value属性里，而是包含在标签中 -->
  11.             <!-- <button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权 -->
  12.             <!-- 且input禁止关闭标签，因为button的值不是写在value里而是咋标签里-起始、关闭标签之间 -->
  13.             <input type="button" value="按钮"/>
  14.             <!-- 跟js合作并且作为绑定事件的 -->
  15.             <button>按钮</button>
  16.             <!-- 获取用户输入的值 -->
  17.             <!-- 设置submit属性必须form里有method属性和action属性 -->
  18.             <input type="submit" value="提交"/>
  19.             <!-- range数字滑动条，值：0-100； -->
  20.             <!-- 在ie浏览器上可以显示数值,谷歌浏览器不行 -->
  21.             <!-- min，max设置数值范围 -->
  22.             <!-- step属性设置间隔值step=“50” -->
  23.             <!-- value属性设置起始位置 -->
  24.             <input type="range"  min="-100" max="500" step="50" value="-100"/>
  25.             <input type="range"  min="-100" max="500" step="50" value="0"/>
  26.             <!-- number属性只能输入数字，在谷歌浏览器可以显示数值增减导航按钮，IE不行 -->
  27.             <!-- 同样，min，max设置输入值范围 -->
  28.             <!-- value设置初始值 -->
  29.             <input type="number" min="-100" max="100" value="-50"/>
  30.             <!-- checkbox复选框也就是多选，复选框可以点击选中并再次点击取消选中状态，而radio不行-->
  31.             <input type="checkbox"/>可取消选择<br />
  32.             <!-- 多个radio组成一个选项组，下面这个选项组可以选中三个 -->
  33.             <input type="radio"  />不可取消选择
  34.             <input type="radio"  />不可取消选择
  35.             <input type="radio"  />不可取消选择
  36.             <!-- 而下面这个选项组就只能选中一个，归功于name的值相等所有，他们之中name相等就只能选其中一项 -->
  37.             <!-- checked属性则是初始化默认选中选项 -->
  38.             <input type="radio" name="a" checked="checked"/>初始选项
  39.             <input type="radio" name="a"/>限制选项a
  40.             <input type="radio" name="a"/>限制选项b
  42.             <!-- select 元素用于创建单选或多选菜单 -->
  43.             <select>
  44.                 <option>选项a</option>
  45.                 <option>选项b</option>
  46.                 <option>选项c</option>
  47.             </select>
  49.             <!-- details和select用法一样，但是details可以输入内容自动查找选项 -->
  50.             <!-- 且details一般都是配合input使用，而且要设置input的属性list=details的id值 -->
  51.             <input type="text" list="datalist1" />
  52.             <details id="datalist1">
  53.                 <option>1</option>
  54.                 <option>2</option>
  55.                 <option>3</option>
  56.             </details>
  57.         </form>
  58.     </body>
  59. </html>

表单2浏览

  1. 略

表单3

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>input的各种type</title>
  6.     </head>
  7.     <body>
  8.         <!-- method是传值方式，action是要跳转的页面，两者是共存的 -->
  9.                 <form method="get" action="action跳转.html" enctype="multipart/form-data">
  10.                 <input placeholder="type默认为text"/>
  11.                 <input type="number" placeholder="请输入账号"/><!-- 数字 -->
  12.                 <input type="password" placeholder="请输入密码"/><!-- 密文 -->
  13.                 <input type="email" placeholder="请输入邮箱" value="1753552134@qq.com"/><!-- 邮址 -->
  14.                 <input type="color" width="20px" height="40px"/><!-- 颜色板 -->
  15.                 <input type="date" /><!-- 本地日期 -->
  16.                 <input type="datetime"/><!-- 此属性以移除,推荐使用datetime-local -->
  17.                 <input type="datetime-local"/><!-- 日期及本地时间 -->
  18.                 <input type="hidden"/><!-- hidden是隐藏的意思隐藏只是在网页页面上不显示输入框，
  19.                 但是虽然隐藏了，还是具有form传值功能。一般用来传值，而不必让用户看到。 -->
  20.                 <input type="image" src=""/><!-- 不用看这是图片按钮 -->
  22.                 <input type="month"/><!-- month选取年月值 -->
  23.                 <input type="radio"/><!-- 单选按钮 -->
  24.                 <input type="checkbox"/><!-- 复选按钮 -->
  25.                 <input type="range"/><!-- 滑动条 -->
  26.                 <input type="reset"/><!-- 重置from表单内的所有值 -->
  27.                 <input type="search" placeholder="输入查找内容"/><!-- 跟text的区别就是有个清楚按钮 -->
  28.                 <input type="submit"/><!-- 获取用户输入的内容并执行跳转-按照form的属性值method和action跳转，
  29.                 form里必须要有method和action属性 -->
  30.                 <input type="time"/><!-- 时间-时、分 -->
  31.                 <input type="tel" value="tel"/>
  32.                 <input type="url"/><!-- 仅能输入网址 -->
  33.                 <input type="week"/><!-- 年-周 -->
  34.                 <input type="file" multiple="multiple"/>
  35.                 <!-- file用来上传文件，其中multiple是多文件，
  36.                 required是单文件，使用input-file上传文件时需设置
  37.                 form的属性 enctype="multipart/form-data" -->
  38.                 <!-- 
  39.                 ●开发中遇到一个这样的需求，
  40.                 ●要求input输入框在手机端出现数字键盘的同时显示圆点，试过各种方法都不太理想，
  41.                 ●最终经过查阅大量资料后，终于实现了需求。
  42.                 ●我们一般的密码输入框是这样的：-->
  43.                 <input  type="password" placeholder="请输入密码">
  44.                 <!-- 
  45.                 ●这个实现了输入密码显示圆点的需求，但是手机上他调出来的是字母键盘，
  46.                 ●所以不符合开发需求。所以最终的密码输入框是这样的：-->
  47.                 <input type="tel" maxlength="6" style="-webkit-text-security:circle"  placeholder="请输入密码">
  48.                 <!-- 　　     释： -webkit-text-security用法， -->
  49.                 <!-- 　　　　指定用于在密码输入字段中代替字母的形状。 -->
  50.         　　　　 <!--语法：-webkit-text-security: circle | disc | none | square;
  51.         　　　　　　circle：圆形；disc：圆盘形状（句号）
  52.                    none：没有使用形状；square：方形的； --> 
  53.                 </form>
  54.     </body>
  55. </html>

表单1浏览

  1. 略

发表评论

表情：
评论列表 （有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

    相关 web前端HTML学习指南

    Web前端也是现在比较热门的一个行业，而且相对于其他的编程语言来说，HTML更加的通俗易懂。今天，web前端培训的小编就来给大家说一说，web前端HTML学习指南。 要学习H

    你的名字你的名字/ 0 赞/ 273 阅读