search

博客列表 >【HTML】常用表单重点知识：重点总结

【HTML】常用表单重点知识：重点总结

可乐随笔
可乐随笔原创
2022年11月29日 22:51:50374浏览

常用表单重点知识

表单属性

1.action：服务器上处理表单的脚本；
2.method:提交方式
GET:少量且公开
POST:大量且加密

  1. enctype:值对编码方案（普通表单和分块文件上传）
    4.target
    5.id:使用ID引用表单
    6.onsubmit:事件属性，提交时执行的JS

表单类型

text/password/date/number/url/radio/select/textarea等

表单写法

重点属性介绍
1.name:value 名值对组合
2.required:必选项
3.readonly:只读，只能看，不能改，但能提交
4.disabled:禁用，只能看，不能改，不能提交
5.autocomplete：浏览器退回后保留原来的数据
6.number类型：min/max/step：限定表格中数据最大值和最小值及步长
7.date类型：min/max格式：1949-10-01/2000-01-01,表示只能选择这个时间区间
8.url类型：自带url类型验证
9.color类型：拾色器
10.upload类型：上传文件用，name不能用-线，可以用_线，input选择，button上传。
11.hidden隐藏域类型：不在页面显示，用来做赋值使用，一般都包含name和value。
12.range滑动条：可以有来做评星打分等用途。
13.progress进度条：双标签<progress></progress>,可以给max和value,不可以给min
14.radio单选框:

  1. - name:必须相同，以保证唯一性
  2. - input和它自己的label标签绑定，建议：男(male),女(female),保密(secret)
  3. - input.value <==> input.id <==> label.for 一致
  4. - checked: 默认选项，避免空提交
  5. - 总标签label.for和默认标签绑定

15.checkbox复选框
16.select+option下拉列表：name在select中，value在option中。

  1. - 实现提示的效果selected + disabled
  2. - name 和 value 分别在select和option中
  3. - 选择过多，可以使用分组，optgroup
  4. - multiple:支持多选
  5. - <select required><option value=''> ：可验证select必选。

17.textarea多行文本框：

  1. - textarea:没有value属性，它的值位于textarea标签之间
  2. - maxlength:最大长度
  3. - 可以使用CSS限制textarea固定大小

20.label标签for和input标签id内容一致，进行绑定
21.output功能与span功能类似，但更好用，用来做计算输出
22.每个表单控件都有一个form属性，都指向当前表单可以用来访问表单不同的控件中的值，很重要！

代码范例

  1. <form action="register.php" method="post" enctype="application/x-www-form-urlencoded">
  2.     <fieldset>
  3.         <!--表单分组-->
  4.             <legend>分组名称：基本信息</legend>
  5.             <div class="username">
  6.             <label for="username">用户名：</label>
  7.             <!--label的for和input的id内容一致，进行绑定-->
  8.             <input type="text" id="username" name="username" placeholder="请输入用户名" required autocomplete/>
  9.             </div>
  10.             <div class="password">
  11.             <label for="password">密码：</label>
  12.             <!--label的for和input的id内容一致，进行绑定-->
  13.             <input type="password" id="password" name="password" placeholder="请输入密码" required autocomplete/>
  14.             <button onclick="this.previousElementSibling.type='text'">显示密码</button>
  15.             </div>
  16.             <div class="email">
  17.             <label for="email">邮箱：</label>
  18.             <!--email自带格式验证-->
  19.             <input type="email" id="email" name="email" placeholder="请输入邮箱" required />
  20.             </div>
  21.             <div class="age">
  22.                 <label for="age">年龄：</label>
  23.                 <input type="number" id="age" name="age" min="18" max="80" placeholder="请输入年龄" required />
  24.             </div>
  25.             <div class="birthday">
  26.                 <label for="birthday">出生日期：</label>
  27.                 <input type="date" id="birthday" name="birthday" min="1949-10-01" max="2000-01-01" placeholder="请输入年龄" required />
  28.             </div>
  29.             <div class="blog">
  30.                 <label for="blog">网址：</label>
  31.                 <!--URL自带格式验证-->
  32.                 <input type="url" id="blog" name="blog"  placeholder="请输入网址" required />
  33.             </div>
  34.             <div class="color">
  35.                 <label for="color">拾色器</label>
  36.                 <input type="color" name="color" id="color" value="#FFFF00" onchange="getColor(this)" />
  37.                 <output>#FFFF00</output>
  38.             </div>
  39.             <div class="serach">
  40.                 <label for="query">搜索：</label>
  41.                 <input type="search" name="search" id="search" placeholder="输入关键字">
  42.                 <button type="button">查询</button>
  43.             </div>
  44.         </fieldset>
  45.         <fieldset>
  46.             <legend>其他信息</legend>
  47.             <!-- upload上传控件 -->
  48.             <div class="upload">
  49.                 <label for="upload">头像:</label>
  50.                 <input type="file" name="name_pic" id="upload" />
  51.                 <button type="button">上传</button>
  52.             </div>
  53.             <!-- hidden 隐藏域 -->
  54.             <input type="hidden" name="uid" value="10010" />
  55.             <!-- type=range 滑动块 -->
  56.             <div class="range">
  57.                 <label for="range">星级：</label>
  58.                 <input type="range" name="range" id="range" min="0" max="5" step="1" oninput="getStatus(this)" />
  59.                 <output>0</output>
  60.             </div>
  61.             <!-- progress 进度条 -->
  62.             <div class="progress">
  63.                 <label>进度</label>
  64.                 <!-- min不要给 -->
  65.                 <progress name="progress" max="100" value="10"></progress>
  66.                 <output></output>
  67.                 <button type="button" onclick="handle(this)">+1</button>
  68.             </div>
  69.         </fieldset>
  70.         <fieldset>
  71.             <legend>预置内容：</legend>
  72.             <!-- 预置内容：用户选择就好，不用输入。服务器90%的安装问题都是因为输入控件导致的。-->
  73.             <!-- 常用预置表单有radio,select等 -->
  74.             <div class="gender">
  75.                 <!-- 主标签使用默认的选项，点击主标签显示默认 -->
  76.                 <label for="secret">性别: </label>
  77.                 <!-- 
  78.                     1. name:必须相同，以保证唯一性
  79.                     2. input和它自己的label标签绑定，建议：男(male),女(female),保密(secret)
  80.                     3. input.id <==> label.for必须一致,建议input.value也一致。
  81.                     4. checked: 默认选项，避免空提交
  82.                     5. 总标签label.for和默认标签绑定
  83.                 -->
  84.                 <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  85.                 <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
  86.                 <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
  87.             </div>
  88.             <!-- checkbox 多选框 -->
  89.             <div class="hobby">
  90.                 <!-- 不用绑定某个标签，可以去掉for -->
  91.                 <label>爱好：</label>
  92.                 <!--
  93.                     1. name:hobby[]，数组保存一个值或多个值
  94.                     2. input.id <==> label.for一致
  95.                 -->
  96.                 <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
  97.                 <input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label>
  98.                 <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label>
  99.                 <input type="checkbox" name="hobby[]" value="program" id="program"><label for="program">编程</label>
  100.             </div>
  101.             <!-- select + option下拉列表 -->
  102.             <div class="edu">
  103.                 <label for="edu">学历：</label>
  104.                 <select name="edu" id="edu" multiple>
  105.                     <!-- 
  106.                         1.实现提示的效果selected + disabled 
  107.                         2.name 和 value 分别在select和option中
  108.                         3.选择过多，可以使用分组，optgroup
  109.                         4.multiple:支持多选
  110.                     -->
  111.                     <option value="" selected disabled>--请选择--</option>
  112.                     <optgroup label="义务教育">
  113.                         <option value="1">小学</option>
  114.                         <option value="2">初中</option>
  115.                         <option value="3">高中</option>
  116.                     </optgroup>
  117.                     <optgroup label="高等教育">
  118.                         <option value="4">专科</option>
  119.                         <option value="5">本科</option>
  120.                         <option value="6">硕士</option>
  121.                         <option value="7">博士</option>
  122.                     </optgroup>
  123.                 </select>
  124.             </div>
  125.             <!-- datalist 数据列表 -->
  126.             <div class="like">
  127.                 <label for="keyword">语言：</label>
  128.                 <!--
  129.                     1.自带联想提示：预定义+自定义，即可实现自己输入，也能从预置中选择：input+select
  130.                     2.input + dateList + option
  131.                     3.input.list <==> datalist.id进行绑定
  132.                 -->
  133.                 <input type="search" name="language" list="details" id="keywork">
  134.                 <!-- input.list <==> datalist.id进行绑定 -->
  135.                 <datalist id="details">
  136.                     <!-- 预置列表 -->
  137.                     <option value="html">html</option>
  138.                     <option value="php">php</option>
  139.                     <option value="css">css</option>
  140.                     <option value="js">js</option>
  141.                     <option value="vue">vue</option>
  142.                     <option value="node">node</option>
  143.                 </datalist>
  144.             </div>
  145.         </fieldset>
  146.         <div>
  147.             <label for="comment">个人简介</label>
  148.             <!-- 
  149.                 1. textarea:没有value属性，它的值位于textarea标签之间
  150.                 2. maxlength:最大长度
  151.                 3. 可以使用CSS限制textarea固定大小
  152.             -->
  153.             <textarea name="comment" id="comment" cols="30" rows="10">Hello world</textarea>
  154.         </div>
  155.         <button>提交</button>
  156.         <!-- from中的button，默认为提交，等同于以下代码 type="submit" -->
  157.         <button type="submit"></button>
  158.         <!-- type="button" 只是一个普通按钮，没有预置行为，如提交，复位 -->
  159.         <!--
  160.             如果想将表单的同步提交，改为异步提交(Ajax,Fetch),禁用默认行为
  161.             1. <button type="button">
  162.             2. 事件方法中: event.preventDefault(),禁用默认行为
  163.             3. form.onsubmit = "return false",禁用当前表单默认提交行为
  164.         -->
  165.     </form>
上一条：18、【网摘】Spring Boot定制Spring MVC下一条：11、【网摘】Spring Boot自动配置原理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多