【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 标签
获取本次课程作业和案例

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

相关推荐
彭世瑜20 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40421 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish21 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five23 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序23 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54123 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省24 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98525 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮26 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code27 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript