IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【表单】08 -> 正文阅读

[JavaScript知识库]【表单】08

三、表单

1. form 表单

  1. form标记:表单元素的容器,属性action、method
  2. action属性:表单处理服务器,完整格式(协议的名称必须写)
  3. method属性:表单的提交方式(post和get)
    • GET 方法,浏览器会与表单处理服务器建立连接,然后在传输步骤中发送所有的表单数据(key=value的格式):浏览器会将数据直接附在表单的 action URL(Uniform Resource Locator,统一资源定位符,俗称网络地址) 之后,URL和数据间用问号进行分隔
    • POST 方法,浏览器会与表单处理服务器建立连接,并按分段传输的方法将数据发送给服务器;在服务器端,当需要POST的参数时,这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数
    • 区别:
      • GET在url里传送数据:安全性低、容量小,便于分享(商品等),适合获取,且会缓存;
      • post安全性一般、容量几乎无限,更适合上传(图片等)
  4. 所有要提交数据的表单元素都应该放在form内,提交按钮提交的是整个form表单
  5. 伪类选择器::focus—获得焦点,焦点既是等待用户操作的光标

2. input 表单项

  1. input标记:最常用的表单元素,通过type属性区分应用
  2. type:input的种类控件
    • 文本类:text——文本框;password——密码
    • 选择类:radio——单选;checkbox——复选
    • 按钮类:submit/image——提交/图片提交;reset——重置;button——按钮
    • 特殊类:file——上传;hidden——隐藏域
  3. name:名字,必须属性,可以用与取值和分类,提交的key
  4. value:值,文本和特殊类控件中作为输入框的内容;选择类空间中用来区分选项;按钮类控件中用来设置按钮的名字,提交的value
  5. disabled:禁用的 input 元素
  6. placeholder(文本类控件):文本输入提示
  7. readonly(文本类控件):只读的文本输入元素
  8. checked(选择类控件):页面加载时默认选定的 input 元素

<form action="">
    <!-- 文本类表单元素 -->
    <input type="text" class="text"><br>
    <input type="password"><br>

    <!-- 选择类表单元素 -->
    <!-- 单选 -->
    <input type="radio" name="gender"><input type="radio" name="gender"><br>
    <!-- 多选 -->
    <input type="checkbox" name="hobby">足球
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">羽毛球
    <br>

    <!-- 按钮 -->
    <input type="submit" value="提交表单"><br>
    <input type="image" src="" alt="">
    <!-- 重置表单 -->
    <input type="reset" value="重置表单"><br>
    <input type="button" value="按钮"><br>
    <button type="submit">表单内默认submit</button><br>

    <!-- 特殊类表单元素 -->
    <input type="file" name="" id="">上传文件
    <input type="hidden" name="">隐藏元素
</form>
<button type="button">表单外默认buttom</button>

3. 其他表单元素

  1. select:下拉选框

    • size属性:用来设置同时显示选项的数量
    • value属性:select的value值为被选中的option的value值
  2. option:选项(select的子元素)

    • selected属性:用来设置下拉框的默认选项
    • value属性:被选中时为select元素赋值
    <!-- 
        下拉框:
       		 - size属性:显示的个数
    -->
    <select size="2">
        <option value="val1">北京</option>
        <option value="val2">上海</option>
        <option value="val3">广州</option>
    </select>
    

  3. textarea:文本域

    • cols属性:列数(不是按照中文)
    • rows属性:行数
    <!-- 
        文本域 
            - 标记里边不能填内容
            - 30: 英文30列
            - 10: 英文10行
            - resize: 控制缩放
            - none 一般元素默认值,不可以缩放
            - both 都可以缩放,textarea默认值
            - horizontal 水平方向可以缩放
            - vertical 垂直方向可以缩放
    -->
    <textarea name="" id="" cols="30" rows="10"></textarea><br>
    
    textarea{
        width: 200px;
        height: 200px;
        resize: none;
    }
    

  4. label:表单绑定

    • for属性:将值设置成某个input的id值,可以帮助input元素获取焦点。
    • 将label设置成某个input元素的父元素也可以做到类似的效果,但是注意不要设置for属性
    <!-- label标签 -->
    <!-- way1 -->
    <input type="radio" name="gender" id="man"><label for="man"><span></span></label>
    <!-- way2:必须把for删掉 -->
    <label>
        <input type="radio" name="gender"/></label>
    

4. 样式

  1. next选择器(div+p):获取满足+前面的元素的下一个兄弟元素为+后面的元素

  2. cursor:改变鼠标在移入某元素上时的鼠标样式

    • default:默认光标(通常是一个箭头)
    • pointer:指示链接(点击手型)
    • move:可移动对象(十字)
    • text:指示文本(焦点光标)
    • wait:等待(沙漏或者旋转)
    • help:帮助(问号)
    div{
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: pointer;
    }
    

  3. resize:控制缩放,要配合overflow:auto 一块使用

    • none:一般元素的默认值,不缩放
    • both:textarea的默认值,缩放
    • horizontal:水平方向可以缩放
    • vertical:垂直方向可以缩放

  4. caret-color:光标颜色:改变文本输入框的光标颜色,不会改变文字颜色

    input{
        caret-color: royalblue;
    }
    

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-03 15:59:25  更:2022-01-03 16:01:14 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 12:23:19-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码