常用html元素（下）

在发送网络请求的时候分为get和post请求，get请求直接返回资源 相对来讲如果涉及到密码比较隐私的数据等是非常不安全的，这里我们推荐post，提到post我们就不得不提到表单数据 这里介绍下一些常用的表单元素

表单元素" class="reference-link"><from>表单元素

  • action：处理表单提交url，可以被提交按钮的的formaction属性覆盖
  • method 提交类型:
    get:默认值,表单数据以请求参数形式通过url提交，数据量最大2k；
    post：表单数据放在请求体重发送，数据量更大更安全
    可以被formaction属性覆盖
  • enctype编码方式：
    当method=‘post’取值才有意义
    可以被formaction属性覆盖
    实际上就是表单内容提交到服务器的MIME类型
  • enctypeq取值：
    application/x-www-from-urlencoded:默认值，适合发送value值，使用URL编码， get/post均适合
    multipart/form-data:适用于文件上传，采用二进制流，将文件域中的内容封装到请求参数重发送
    text/plain:适用于调试或者发送邮件 如<from: action="mailto:url" enctype="text/plain">
  • name:表单唯一的名称
    与id 一样 用来唯一标识元素，同于表单控件元素的from属性，用来绑定所属表单，可以快捷访问内部控件元素
  • autocomplete:自动填充完成

控件标签" class="reference-link"><label>控件标签

  • for属性：与指定控件的id属性绑定，实现点击标签时，被绑定的控件自动获取焦点
  • 显示绑定：
    <lable for="email">Email:</lable><input type ="email " id="email">
  • 隐示绑定:
    <lable>Email:</lable><input type="email"></lable>不需要for id属性

输入框" class="reference-link"><input>输入框

type类型 （前9个比较常用）

  • text:单行文本框
  • password:密码框 输入显示*
  • email:邮箱文本框 h5现在可以自动验证
  • number:整数值文本框， 智能输入数字
  • radio:单选按钮 仅允许用户多选一
  • checkbox:复选框 允许用户选择一个或者多个
  • file ：文件上传域 专用于上传文件到服务器
  • hidden：隐藏域 不显示，但可以被提交
  • search：搜索框，可能会有清空按钮
  • submit：提交按钮（用button代替）
  • reset：重置按钮（尽量少用）
  • button：普通按钮：（仅有视觉效果 无默认行为）
  • date：日期选择器
  • time：输入时间
  • color：拾色器控件
  • image：图片式提交按钮，src指定图片
  • range：拉杆范围拖拖动条
  • tel：输入电话号码
  • url：输入url地址

name：名称

请求参数的名称，对应脚本处理名字的变量名
单选按钮中，所有按钮的name属性值应该相同
复选框中，name值推荐使用数组语法"colors[],以实现多选效果"
文件上传中，作为后台脚本的文件引用标识，如PHP中的"$_FILES"

value：值

请求参数的值，对应脚本处理的变量值，使用预定义值控件无效

placeholder:提示信息

仅限输入框text和password，输入提示框的提示信息，可以被value内容覆盖

required：必填项

实战：

比如我们用以上控件做一个用户登录的提交表单案例，代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表单提交</title>
  8.   </head>
  9.   <body>
  10.     <form action="" method="POST">
  11.       <fieldset>
  12.         <legend>必填项</legend>
  13.         <div>
  14.           <label for="username">账号：</label>
  15.           <input
  16.             type="text"
  17.             id="username"
  18.             autofocus
  19.             required
  20.             placeholder="必须是6-8位"
  21.           />
  22.         </div>
  23.         <div>
  24.           <label for="password">密码：</label>
  25.           <input
  26.             type="text"
  27.             name="password"
  28.             id="password"
  29.             required
  30.             placeholder="必须是字母+数字，6-8位"
  31.           />
  32.         </div>
  33.         <div>
  34.           <label for="email">邮箱：</label>
  35.           <input
  36.             type="email"
  37.             name="email"
  38.             id="email"
  39.             placeholder="必须是xxx@xxx.com"
  40.           />
  41.         </div>
  42.       </fieldset>
  43.       <!-- 输入文本框 -->
  45.       <!-- 单选框 多选一 -->
  46.       <div>
  47.         <label for="secret">性别</label>
  49.         <input type="radio" name="gender" id="gender" value="male" />
  50.         <label for="male">男</label>
  52.         <input type="radio" name="gender" id="gender" value="female" />
  53.         <label for="female">女</label>
  54.         <input type="radio" name="gender" id="gender" value="secret" checked />
  55.         <label for="secret">保密</label>
  56.       </div>
  58.       <!-- 复选框 -->
  59.       <div>
  60.         <label for="">爱好</label>
  61.         <!-- 因为允许同时要提交都服务器要写成数组格式  -->
  62.         <input type="checkbox" name="array[]" id="photo" /><label for="photo"
  63.           >摄影</label
  64.         >
  65.         <input type="checkbox" name="array[]" id="swim " /><label for="swim"
  66.           >游泳</label
  67.         >
  68.         <input type="checkbox" name="array[]" id="eat" /><label for="eat"
  69.           >美食</label
  70.         >
  71.         <input type="checkbox" name="array[]" id="tv" /><label for="tv"
  72.           >电影</label
  73.         >
  74.       </div>
  75.       <!-- 下拉列表  select -->
  76.       <div>
  77.         <select name="level" id="">
  78.           <option value="1">青铜</option>
  79.           <option value="1">白银</option>
  80.           <option value="1">黄金</option>
  81.           <option value="1">铂金</option>
  82.           <option value="1">钻石</option>
  83.           <option value="1">王者</option>
  84.         </select>
  85.       </div>
  86.       <!-- datalist 输入框+下拉列表    -->
  87.       <div>
  88.         <label for="search">关键字：</label>
  89.         <input type="search" name="search" id="search" list="my-key" />
  90.         <datalist id="my-key">
  91.           <option value="HTML"></option>
  92.           <option value="JAVA"></option>
  93.           <option value="PYTHON"></option>
  94.           <option value="C++"></option>
  95.         </datalist>
  96.       </div>
  97.       <div>
  98.         <button type="submit">提交</button>
  99.       </div>
  100.     </form>
  101.   </body>
  102. </html>

运行的结果如下图：
0319作业

感谢，若有不足 欢迎指正~

更多相关文章

  1. html制作一张课程表和用户注册表单
  2. HTML制作表单与表格的实例演示
  3. 0319表格和表单
  4. 新浪博客提示“系统繁忙，请稍候再试”的解决方法
  5. html表格与表单实战
  6. 选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现
  7. 关于表格和表单的简易写法
  8. HTML中表格和表单的应用实例 (MD)
  9. HTML中表格和表单的应用实例

随机推荐

  1. 打开“保存命令历史记录时遇到错误”时的
  2. 假如你不小心干掉了系统，你该怎么办？（一次手
  3. Linux之RHEL7root密码破解（一）
  4. 在Linux下使用命令行安装DB2
  5. top命令输出详解
  6. linux socket网络编程：fcntl select（多个客
  7. Moblin: kernel编译和rpm打包（一）：更换kerne
  8. Linux中断处理体系结构分析（二）
  9. Linux学习笔记（九）--RedHat 7.0之用户身份
  10. 浅谈Oracle函数返回Table集合