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

news2024/11/24 19:08:12

文章目录

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

表单概述

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

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

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

一、表单容器（form）

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

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

二、控件

单行输入框 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"
	作用：只读。只能显示用户输入的信息，不能修改

密码输入框 input

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

单选 input

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

多选 input

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

文件上传 input

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

按钮 input、button

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

下拉选项框 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中

多行文本域 textarea

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

label标签

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

1. 将控件包起来（嵌套）
<label>
	<input type="checkbox" checked="checked">长沙
</label>

2. 使用for属性（推荐）
 分开写（并列）

<input type="checkbox"  id="sz">
<label for="sz">长沙</label>