【HTML03】HTML表单语法笔记,附带案例-作业

文章目录

表单概述

允许用户输入信息,和提交信息的-收集用户信息。

表单:表单容器+表单控件组成。

控件:输入框、单选按钮、多选、下拉框、多行文本域、文件上传、密码等

一、表单容器(form)

即一般先写表单容器,再再该表单容器中写控件。

html 复制代码
<form method="get|post" action="url">
   //这里可以写任意的控件或其他任意的标签
   //method的get、post主要是结合后端,指的是表单的提交方式(快递方式)
   //action 指的是提交地址,即将数据发送到哪里(由后端指定)(快递地址)
</form>
二、控件
  1. 单行输入框 input 默认的

    html 复制代码
    <input type="text" name="zs" maxlength="100" value="" placeholder="请输入用户名">
    //单标记标签、行内元素
    属性:(所有的属性都是可选的)
    1. type="text" 决定input可以72变的秘诀就是该属性了
    	可能的值有
    	type="text(默认值)|password|radio|checkbox|file|button|reset|submit|tel|search|number|date" 等 
    2.name="uname"
    	作用:给该控件起名字.名字最好不要写中文
    3.maxlength="数字"  
    	作用:允许用户输入的最大的文字数量的个数
    4.minlength="数字"
    	作用:允许用户输入的最少的文字个数
    5.size="数字"
    	作用:表示输入框的长度(尺寸),值越大,输入框越长
    6.value=""
    	作用:控件的内容(一般是用户输入的文字会保存到该属性中)
    7.placeholder="控件的提示文字"
    	作用:增加用户体验,告诉用户输入框要输入什么内容
    8.disabled="disabled"
    	作用:是否禁用表单控件,添加为禁用,去掉为取消禁用,禁用后该输入框不可用(灰色)
    9. readonly="readonly"
    	作用:只读。只能显示用户输入的信息,不能修改
  2. 密码输入框 input

    html 复制代码
    <input type="password">
    属性同上。
  3. 单选 input

    html 复制代码
    <input type="radio">
    属性:除3、4、5、7外
    如何实现多选一:给他们使用name属性分组,name属性的值保持一致即可。
    如何设置默认选中状态:
    	给其添加:checked="checked" 属性
  4. 多选 input

    html 复制代码
    <input type="checkbox">
    属性同radio
    也可以通过checked="checked" 设置选中状态
  5. 文件上传 input

    html 复制代码
    <input type="file">
    属性同普通输入框
    外观在不同的浏览器下可能会不一样。都是正常的,无需理会
  6. 按钮 input、button

    html 复制代码
    <input type="button|reset|submit">
    属性:除3、4、5、7外
    a. 普通按钮button
    b.重置按钮reset
    c.提交按钮submit
  7. 下拉选项框 select

    html 复制代码
    //写法类似于列表ul一样
    <select>
        <option>列表项1</option>
        <option>列表项2</option>
    </select>
    //属性:
    1.name="uname"
    2.value=""
    3.size="数字"
    4.readonly="readonly"
    5.disabled="disabled"
    6.selected="selected"  写在option
    7.multiple="multiple"  多选,写在select中
  8. 多行文本域 textarea

html 复制代码
<textarea >
</textarea>
属性:
1.value
2.readonly="readonly"
3.disabled="disabled"
4.cols="数字" 决定宽度(列数)
5.rows="数字"  决定高度(行数)
  1. label标签

    作用:增加用户体验,增加点击区域的

    html 复制代码
    1. 将控件包起来(嵌套)
    <label>
    	<input type="checkbox" checked="checked">长沙
    </label>
    
    2. 使用for属性(推荐)
     分开写(并列)
    
    <input type="checkbox"  id="sz">
    <label for="sz">长沙</label>

总结:单标记标签大全

html 复制代码
1.meta
2.br
3.hr
4.img
5.input
相关单词
  1. method 方法、方式
  2. get 获取
  3. post 贴,发布
  4. form 表单
  5. action 提交方式,
  6. input 输入
  7. type 类型
  8. maxlength 最大长度
  9. minlength 最小长度
  10. value 值
  11. placeholder 占位符
  12. radio 广播、单选
  13. button 按钮
  14. reset 重置
  15. submit 提交
  16. label 标签
获取本次课程作业和案例

如需本次课作业、笔记、案例等,请通过下方二维码获取。

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
aloha_7893 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
dsywws4 小时前
Linux学习笔记之vim入门
linux·笔记·学习
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端