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

文章目录

• • • • 表单概述
      • 一、表单容器（form）
      • 二、控件
      • 相关单词
      • 获取本次课程作业和案例

表单概述

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

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

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

一、表单容器（form）

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

<form method="get|post" action="url">
   //这里可以写任意的控件或其他任意的标签
   //method的get、post主要是结合后端，指的是表单的提交方式（快递方式）
   //action 指的是提交地址，即将数据发送到哪里（由后端指定）（快递地址）
</form>

二、控件

1. 单行输入框 input 默认的

   <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

   <input type="password">
   属性同上。

3. 单选 input

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

4. 多选 input

   <input type="checkbox">
   属性同radio
   也可以通过checked="checked" 设置选中状态

5. 文件上传 input

   <input type="file">
   属性同普通输入框
   外观在不同的浏览器下可能会不一样。都是正常的，无需理会

6. 按钮 input、button

   <input type="button|reset|submit">
   属性：除3、4、5、7外
   a. 普通按钮button
   b.重置按钮reset
   c.提交按钮submit

7. 下拉选项框 select

   //写法类似于列表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

<textarea >
</textarea>
属性：
1.value
2.readonly="readonly"
3.disabled="disabled"
4.cols="数字" 决定宽度（列数）
5.rows="数字"  决定高度（行数）

9. label标签

   作用：增加用户体验，增加点击区域的

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

总结：单标记标签大全

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 标签

获取本次课程作业和案例

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