search

博客列表 >表单常用元素及表单控件学习总结

表单常用元素及表单控件学习总结

N.
N.原创
2020年10月08日 00:40:503533浏览

HTML常用元素介绍

HTML表单元素介绍

表单的元素只有一个<form>,表单控件的元素根据类型不同有多个。

表单元素<form>的常用属性
属性 描述
action 表示表单提交的url地址（处理表单提交的脚本）
method 表单提交的类型，有GET和POST两种类型： GET: 默认提交类型,表单数据以查询字符串形式附加到 URL上。POST: 请求内容在请求体中请求类型属性action的取值；
enctype 设置表单提交的编码方式分为三种：multipart/form-data不对字符编码，用于发送二进制的文件，其他两种类型不能用于发送文件；text/plain用于发送纯文本内容，空格转换为 “+” 加号，不对特殊字符进行编码，一般用于email之类的；application/x-www-form-urlencoded，在发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码
name 表单的唯一名称，与id同义，标识元素：与id一样，用来唯一标识该表单元素，绑定元素：用于表单元素form属性，用来绑定所属表单，访问元素：用来快捷访问内部控件元素，如form input value
targer 打开请求url的方式，_self 默认值 当前窗口打开，_blank 新窗口打开提交的url，_parent 父窗口打开提交的url地址， _top 顶层窗口打开提交的url

表单控件元素<input>

常用属性
属性 描述
type 控件类型 如文本框 复选框
name 请求参数的名称，对应于脚本处理的变量名
value 请求参数的值，对应脚本处理的变量值，使用预定义值控件无效
form 控件所属的表单
placeholder 仅限输入框text和password，输入框的提示信息
list 仅限输入框text和password，下拉框智能提示
autocomplate 仅限输入框text/password，自动完成（历史记录）
maxlength 仅限输入框texe/password，允许输入的最大字符数量
checked 仅限单选框radio，复选框checkbox（布尔属性）
readonly 元素只读，但通过javascirpt可修改，（布尔属性）
disabled 元素禁用（布尔属性）
autofocus 自动获取焦点，一个表单仅限一个控件
scr 仅限图像域images，图像url地址，
width 仅限图像域，图像宽度
heigh 仅限图像域，图像高度
type类型
类型 描述
<input type="text"> 单行文本框（默认值）
<input type="password"> 密码输入框
<input type="radio"> 单选框
<input type="checkbox>"> 复选框
<input type="image"> 图像域/提交表单
<input type="file"> 文件上传域
<input type="hidden"> 隐藏域
HTML新增类型
类型 描述
<input type="email"> 电子邮件
<input type=“”date> 日期
<input type="datetime-local"> 本地时间
<input type="tel"> 电话
<input type=""url> url地址
<input type="number"> 数值
<input type=""rang> 范围拖动条
<input type="serch"> 搜索框/移动框
<input type="color"> 拾色器
常用事件属性
属性 描述
onfocus 获取焦点时触发
onblur 失去焦点时触发
onchange 失去焦点，且值发生变化时触发
oninput 值发生变化（不等于失去焦点）时触发
onkeydown 按下键盘时触发
onkeyup 抬起键盘时触发
onclick 鼠标单击时触发
onseleck 选择内容问文本时触发
下拉列表书写形式

`<label for="">下拉列表名称</label>

<select name="" id="">

<option value="">名称</option>>

<option value="">名称</option>>
</select>`
其中selected放在option中表示显示默认该行

文本域书写形式

`<label for=""></label>

<textarea name="" id="" cols="30" rows="20"></textarea>`
cols代表30列 rows代表20行

练习部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="学习2.css" />
  7.     <title>用户注册</title>
  8.   </head>
  9.   <body>
  10.     <h3 class="title">用户注册</h3>
  11.     <form
  12.       action="chen.PHP"
  13.       method="POST"
  14.       class="register"
  15.       enctype="multipart/form-data"
  16.     >
  17.       <label for="5">昵称</label>
  18.       <input
  19.         type="text"
  20.         id="5"
  21.         name="user"
  22.         value=""
  23.         placeholder="账号名称"
  24.         required
  25.         onblur="alert（`哈喽`）"
  26.       />
  27.       <label for="4">账号</label>
  28.       <input
  29.         type="password"
  30.         id="4"
  31.         name="psd1"
  32.         value=""
  33.         autofocus
  34.         placeholder="登录使用的账号"
  35.         required
  36.       />
  37.       <label for="4">密码</label>
  38.       <input
  39.         type="password"
  40.         id="4"
  41.         name="psd1"
  42.         value=""
  43.         placeholder="六位字母数字组成的密码"
  44.         required
  45.       />
  46.       <label for="3">确认</label>
  47.       <input
  48.         type="password"
  49.         id="3"
  50.         name="psd2"
  51.         value=""
  52.         placeholder="*******"
  53.         required
  54.       />
  55.       <!-- 单选框 -->
  56.       <label for="0">性别</label>
  57.       <div>
  58.         <input type="radio" id="2" name="ze" value="ze" />
  59.         <label for="2">男</label>
  60.         <input type="radio" id="1" name="ze" value="ze" />
  61.         <label for="1">女</label>
  62.         <input type="radio" id="0" name="ze" value="ze" checked />
  63.         <label for="0">保密</label>
  64.       </div>
  65.       <!-- 复选框 -->
  66.       <label for="#">兴趣</label>
  67.       <div>
  68.         <input type="checkbox" name="12[]" id="12" value="12[]" />
  69.         <label for="12">学习</label>
  70.         <input type="checkbox" name="12[]" id="13" value="13[]" />
  71.         <label for="13">写字</label>
  72.         <input type="checkbox" name="12[]" id="14" value="14[]" />
  73.         <label for="14">看书</label>
  74.         <input type="checkbox" name="12[]" id="15" value="1515[]" checked />
  75.         <label for="15">编程</label>
  76.       </div>
  77.       <label for="">学历</label>
  78.       <select name="" id="5">
  79.         <option value="1">小学</option>
  80.         <option value="2" selected>初中</option>
  81.         <option value="3">高中</option>
  82.         <option value="4">大专</option>
  83.         <option value="5">本科</option>
  84.       </select>
  85.       <label for="user-pic">头像</label>
  86.       <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  87.       <input type="file" name="user_pic" id="user-pic" />
  88.       <div class="user-pic" style="grid-column: 2"></div>
  89.       <button>提交</button>
  90.     </form>
  91.     <script src="图片.js"></script>
  92.   </body>
  93. </html>

效果图：

上一条：语义化结构元素种类和示例_9月28日作业02下一条：from表单的基础控件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议