Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML-03常用html元素（下）
Blogger Information
Blog 15
fans 0
comment 0
visits 10407
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML-03常用html元素（下）
移动用户-7131521
Original
775 people have browsed it

常用html元素（下）

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

<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:自动填充完成

<label>控件标签

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

<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作业

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post