时间戳

首页 > 技术文章 > 表单

表单

rans 2020-05-06 22:26 原文

1.fieldset 与 legend的使用

　fieldset:将表单元素分组 

　legend:给表单设置名字

<fieldset>
    <legend>必填信息</legend>
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username">
    </div>
    <div>
        <label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password">
    </div>
</fieldset>

2.reset重置按钮

必须有两个前提:

　前提1:type必须是 reset 类型(value默认值是 "重置")

　前提2:所有要重置的内容,必须在一个 form 表单中

3.input 常用属性

　type:input的类型　　　　　　　　　　　　　　

　text:文本输入框　　　　　　　　　　　　　password:密码输入框

　radio:单选框　　　　　　　　　　　　　　 checkbox:复选框

　file:文件上传　　　　　　　　　　　　　　 button:按钮

　reset:重置　　　　　　　　　　　　　　　 submit:提交飙到数据给服务器

　select>option: 下拉列表　　　　　　　　　 textarea:多行文本

　

　maxlength:允许输入的最大字数　　　　　　placeholder:占位文字

　readonly:只读　　　　　　　　　　　　　   disabled:禁止

　autofocus:自动聚焦　　　　　　　　　　　 checked:默认被选中(用于 radio 和 checkbox)

　multiple:多选　　　　　　　　　　　　　　 selected: 默认选中(用于select下拉框)

4.布尔属性

　布尔属性可以没有属性值,写上属性名就代表使用这个属性

　常见的布尔属性有:disabled、checked、readonly、multiple、autofocus、selected

　如果要给布尔属性设值，值就是属性名本身

<!--以下两种写法是等价的,建议采取第一种-->
<input type='text' readonly disabled>
<input type='radio' checked>

<input type='text' readonly='readonly' disabled='disabled'>
<input type='radio' checked='checked'>

5.button两种实现方式

<input type='button' value='普通按钮'>
<input type='reset'  value='重置'><!--value可以省略不写,默认是重置-->
<input type='submit' value='提交'>

<!--等同于-->
<button type='button'>普通按钮</button>
<button type='reset'> 重置按钮 </button>
<button type='submit'> 提交按钮 </button><!--button 默认type 类型是 submit-->

6.去除input的tab键选中效果

input{
    outline:none;
}

7.textarea属性和样式

<!--
    rows:行数
    cols:列数
-->
<textarea rows='10' cols='30'>
    文本内容
</textarea>
/*禁止缩放 文本框 */
textarea{
    resize:none; /* 禁止缩放 */
    resize:horizontal; /* 水平缩放 */
    resize:vertical;  /* 垂直缩放 */
    resize:both;  /* 水平垂直缩放 */
}

8.select 和 option

select中的属性

　multiple:多选

　size:显示个数

option中属性

　selected:默认被选中

9.表单提交的两种方式

表单提交 在 input 中必须有 name 属性,如果没有 name,不知道你要提交什么名称的什么数据

方式一 (传统的表单提交方式)

将所有的 input 包裹在一个 form 中

form设置 action (服务器的地址)

input/button类型是 submit

点击 submit,自动将所有的数据提交到服务器

优点:

　1.利于SEO优化

　2.利于首屏渲染速度

弊端:

　1.会进行页面跳转(意味着服务器必须提前将一个页面写好,并将写好的页面返回给前端,前端直接展示这个页面)

　服务器提前将页面写好:服务端渲染.

　2.不方便进行表单数据的验证

<!--
    完整的表单提交
    1.form中有 action
    2.input中有 name
    3.form中有 submit
-->

<form action='http://www.baidu.com/'>
    用户名:<input type='text' name='uname'>
    密码:<input type='password' name='pwd'>
    <input type='reset' value='重置'>
    <input type='submit' value='提交'>
</form>

方式2(前后端分离)

　通过JavaScript 获取到所有表单的内容,通过正则表达式进行表单的验证

　发送ajax 请求,将数据传递给服务器,验证成功后,服务器会返回结果,需要前端分析这个数据,并决定显示什么内容.(前端渲染和签前端路由)

form 的常用属性

action:用于提交表单数据的请求URL

method:请求方法( get 和 post ),默认是 get

target:在什么地方打开URL(参考 a 元素的 target )

enctype:规定了在向服务器发送表单数据之前如何对数据进行编码

　取值有三种:

　　application/x-www-form-urlencoded:默认的编码方式

　　multipart/form-data:文件上传时必须为这个值,并且 method 必须是 post

　　text/plain:普通文本传输

accept-charset:规定表单提交时使用的字符编码(默认值 unknown,和文档相同的编码)

推荐阅读