【零基础入门前端系列】—表单(七)

简介: 【零基础入门前端系列】—表单(七)

一、什么是表单

表单在Web网页中用来给访问者填写信息,从而采集客户信息端,使得网页具有交互功能。一般是将表单设计在一个HTML文档中,当用户填写完信息后做提交操作,于是表单的内容就从客户端的浏览器传到服务器上,经过服务器的ASP或PHP等处理后,再将用户所需要的信息传送到客户端的浏览器上,这样网页就具有了交互性


🎈get和post的区别

1、数据的提交方式,get把提交的数据url可以看到,post看不到

2、get一般是用于提交少量的数据,post用于提交大量的数据

计算机中的位:二进制数系统中,每个0或1就是一个位,位是数据存储的最小单位。其中8位为一个字节。计算机中的CPU位数指的是CPU一次性能处理的最大位数。例如32位计算机的CPU一次最多能处理32位数据。

二、表单元素

表单元素的属性

  • type:表单元素的类型
  • name:表单元素的名称
  • checked:默认被选中,配合单选按钮和多选按钮使用
  • selected:默认显示 配合option使用
  • disabled:禁用
  • readonly:只读

三、HTML5新增type类型

<form action="" method="post">
        <p>
            邮箱:<input type="email">
        </p>
        <p>
            网址:<input type="url">
        </p>
        <p>
            搜索:<input type="search">
        </p>
        <p>
            数字:<input type="number" min="0" max="100" value="85" step="5">
        </p>
        <p>
            范围(滑块): <input type="range" min="0" max="100" value="20" step="10">
        </p>
        <p>
            颜色:<input type="color">
        </p>
        <p>
            电话:<input type="tel">
        </p>
        <p>日期:<input type="date"></p>
        <p>
            周:<input type="week">
        </p>
        <p>
            月:<input type="month">
        </p>
    </form>

四、HTML5新增属性

(一)、autofocus属性

autofocus属性规定在页面加载时,自动获取焦点

注意:autofocus属性适用于所有input标签的类型

Username: <input type="text" name="username" autofocus>

(二)、multiple属性

  • 该属性规定输入域中可以选择多个值
  • 注意:该属性适用于以下类型的input标签:email和file
<input type="email" multiple>

(三)、placeholder属性

该属性提供一种提示(hint),描述输入域所期待的值

用户名:<input type="text" placeholder="请输入用户名">

(四)、required属性

required属性规定必须在提交之前写入域(不能为空)

Name: <input type="text" name="username" required>


相关文章
|
7天前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
33 1
|
7天前
|
前端开发 小程序
前端解析支付宝返回form表单,自动跳转支付
前端解析支付宝返回form表单,自动跳转支付
133 1
|
7月前
|
前端开发 JavaScript
前端基础 - JavaScript之表单获取焦点及失去焦点
前端基础 - JavaScript之表单获取焦点及失去焦点
81 0
|
7月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
30 0
|
9月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
33 0
|
6月前
|
前端开发
前端笔记:React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。
51 0
|
7月前
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
33 0
|
7月前
|
前端开发
前端基础 - HTML框架集之Form表单
前端基础 - HTML框架集之Form表单
59 0
|
9月前
|
前端开发 Java
前端——HTML或者JSP页面--执行完某事件后刷新页面,重置表单,清空数据
前端——HTML或者JSP页面--执行完某事件后刷新页面,重置表单,清空数据
|
9月前
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-自定义form表单的验证
前端学习笔记202305学习笔记第二十一天-vue3.0-自定义form表单的验证
44 0