form表单那点事儿(上) 基础篇

Posted ₯₰.❉NىFunny

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了form表单那点事儿(上) 基础篇相关的知识,希望对你有一定的参考价值。

 

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右。了解更深,用的更顺。

目录:

表单属性

表单元素

常识
模拟外观

表单属性

这个表单展示了form表单常用的属性

属性名属性值描述
action 一个url地址 指定表单提交到的地址
method `GET` , `POST` 表单将以此种方法提交到服务器
target

`_self` 当前页面

`_blank` 每次在新窗口打开

`blank` 每次在同一个新窗口打开

`_parent` 父级frame

`_top` 顶级frame

iframename 指定的iframe

表单提交后,收到回复的页面
name - 一个html文档中,每个form的name应该是唯一的
enctype

`application/x-www-form-urlencoded` 默认值

`multipart/form-data` 上传file用

`text/plain` html5默认

以 `POST` 方式提交form时的MIME类型。文件上传必须使用 `multipart/form-data`
autocomplete `on` , `off` 是否自动完成表单字段
autocapitalize

`none` 完全禁用自动首字母大写

`sentences` 自动对每句话首字母大写

`words` 自动对每个单词首字母大写

`characters` 自动大写所有的字母

ios 专用属性,表单中文本域英文大小写
accept-charset 字符编码格式( `utf-8` , `gb-2312` 等) 将会以此种编码格式提交表单到服务器,默认值是UNKONWN,即html文档所采用的编码格式。
novalidate `true` , `false` 是否启用表单校验
 

下面举例的表单将会以 post 方式将input的值以 utf-8 编码格式提交到 /login 接口,并会打开一个新页面显示返回结果,由于 target="blank" ,所以就算提交多次该表单,都只会继续刷新之前打开的窗口。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <form action="/login" method="post" target="blank" >
    <input type="text" name=\'username\'>
    <button>提交</button>
  </form>
</body>
</html>

表单元素

常见的表单元素包括 input , select , textarea , button , progress 等,这些元素都有一些自己的属性

属性名属性值描述
必须
type

`text` 单行文本框

`raido` 单选框

`checkbox` 多选框

`tel` 电话号码输入框

`range` 滑块取值框

... ... 更多
指定input标签展示的样式,忽略type属性将默认使用 `text`
name 字符串 form提交时,该字段的key,忽略value属性的元素将不会被提交
状态
checked 任意值 或 忽略该属性 有此属性的radio和checkbox元素将被选中,同一name多个元素具有此属性的,提交时取最后一个值
selected 任意值 或 忽略该属性 有此属性的option元素将被选中,同一name多个元素具有此属性的,提交时取最后一个值
readonly 任意值 或 忽略该属性 具有该属性的表单元素将不可输入或改变状态,除非用javascript操作
disabled 任意值 或 忽略该属性 除拥有readonly的特征外,表单提交时,将忽略此字段
限制
form 表单id 该元素将作为指定id表单字段被提交。用于 `button` 或 `input type=\'submit\'` 元素时,将提交指定id的表单 示例代码
accept

`image/*` 只能上传图片

`video/*` 只能上传视频

`input type=\'file\'` 使用的属性,是一个MIME类型的值,或文件后缀名。 示例代码
multiple 任意值 或 忽略该属性 `input type=\'file\'` 或 `select` 或 应用了 `datalist` 的表单元素才能应用该属性示例代码
maxlength 正整数或0 文本域可输入字符的长度,浮点数将会向下取整,负数将被忽略,JavaScript可以绕过这一限制
required 任意值 或 忽略该属性 该表单字段是否需要被验证
pattern 一个正则表达式 `\\d{4,6}` 形式的正则表达式,作为required校验规则
autocomplete `on` , `off` 同form的autocomplete属性,在表单元素上应用,优先级将高于form上指定的
autofocus 任意值 或 忽略该属性 页面加载时,该元素自动聚焦,应用于多个表单元素时,聚焦到第一个
展示
placeholder 字符串 在元素没有value时,用于占位显示
value 字符串 或 数值 input 或 progress 展示的值,其中: checkbox和radio的默认值是 \'on\'
range和progress的默认值是 0
progress的是0的时候会播放循环动画
示例代码

注意:以下示例部分来自 w3.org

form示例

点击预览按钮,将会把 username1 的值提交到 /preview,

点击发布按钮,将会把 username 的值提交给 /publish




 

 

<form action="/preview" name=\'preview\' id=\'preview\'></form>

<form action="/publish" name=\'publish\' id=\'publish\'>
  <input type="text" name=\'username\' value=\'1\'>
  <input type="text" form=\'preview\' name=\'username1\' value=\'2\'>
  <button form=\'preview\'>预览</button>
  <button>发布</button>
</form>

accept示例

<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">


multiple示例

需要键入 \',\' 方可多选(需浏览器支持)


<label>Cc: <input type=email multiple name=cc list=contacts></label>
<datalist id="contacts">
 <option value="hedral@damowmow.com">
 <option value="pillar@example.com">
 <option value="astrophy@cute.example">
 <option value="astronomy@science.example.org">
</datalist>

.

需要一直按下ctrl键才可多选

<select name=\'number\' multiple>
  <option value="CN">中国</option>
  <option value="US">美国</option>
  <option value="UK">英国</option>
</select>

.

直接框选多文件即可

<input type="file" multiple>

value示例


<progress value=\'70\' max=\'100\'></progress>
<input type="range" value=\'40\' max=\'100\'>
<input type="text" value=\'hello world\'>

常识

下面是对于上面表格的一些总结,也加入了一些新的知识点

  • 没有 name 和有 disable 的字段不会被提交
  • 同一个表单中,相同name的字段值会发生覆盖,radiocheckbox 除外
  • 在低版本浏览器中,name可以作为id使用
  • 忽略或使用浏览器不支持的 type 会转为 type=text
  • 低版本浏览器不支持动态改变 type
  • 点击 button 会默认提交表单
  • 低版本浏览器需要指定 buttontype=submit 才会提交表单
  • 文本域的光标颜色由字体颜色决定
  • form表单不能互相嵌套
  • 表单元素可以不在表单的html结构内 示例代码
  • 在表单最后一个input元素中敲回车,会触发表单提交

模拟外观

有一千种浏览器,就有一千种表单元素外观。在以前,要想改变表单元素外观,需要通过其他标签来模拟。
而在现代浏览器上,通过css3的appearance属性( 兼容情况 )指定元素的渲染风格,
再结合:after,:before伪元素,可以做出很酷炫的表单元素外观。

作为可替换元素,input标签无法使用伪元素。当然这只是W3标准。以下点到名的表单元素,还是可以照常使用:after,:before的。

input type=\'radio\' , input type=\'checkbox\' , input type=\'file\' , input type=\'range\' , button , progress.

appearance是css3的标准属性,面对现实,很多时候还是需要加上-webkit--moz- 前缀,举一个把checkbox做成开关的例子:

<style>
    input[type=\'checkbox\'] {
        -webkit-appearance: none;
        padding: 9px;
        border-radius: 50px;
        display: inline-block;
        position: relative;
        outline: 0;
        -webkit-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
        width: 70px;
        height: 33px;
    }
    
    input[type=\'checkbox\']:before,
    input[type=\'checkbox\']:after {
        position: absolute;
        content: \'\';
        border-radius: 100px;
        -webkit-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
    }
    
    input[type=\'checkbox\']:before {
        background: white;
        top: 1px;
        left: 1px;
        z-index: 2;
        width: 31px;
        height: 31px;
        box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type=\'checkbox\']:after {
        content: \'OFF\';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
        line-height: 34px;
        font-size: 14px;
        background: #eee;
        color: #ccc;
        text-indent: 35px;
        box-sizing: border-box;
        box-shadow: 0 0 1px #eee;
    }
    
    input[type=\'checkbox\']:checked:before {
        left: 37px;
    }
    
    input[type=\'checkbox\']:checked:after {
        content: \'ON\';
        color: #fff;
        text-indent: 10px;
        background: #4cda60;
    }
</style>
<input type="checkbox">

不出意外,长成这样 ,

示例代码来自10个HTML5美化版复选框和单选框

参考资料

MDN

w3.org

以上是关于form表单那点事儿(上) 基础篇的主要内容,如果未能解决你的问题,请参考以下文章

form表单那点事儿(下) 进阶篇

php curl那点事儿

Django之form表单那点事

序列比对那点事儿

关于docker那点事儿——docker基础命令

IMU的那点事儿