-
单行文本框 (text)
- 用途：允许用户输入单行文本。
- HTML 示例:
<input type="text" name="username"> - 特点：可以设置最大长度、只读等属性。
案例:制作一个单行文本框
1.代码
2.效果
未选中效果
选中效果
-
密码输入框 (password)
- 用途：用于安全地输入密码，输入的内容会以圆点或星号显示。
- HTML 示例:
<input type="password" name="userpass"> - 特点：与文本框类似，但隐藏了实际输入字符。
案例:制作密码输入框
1.代码
2.效果
非选中状态
选中状态
状态
-
单选按钮 (radio)
- 用途：当一组选项中只能选择一个时使用。
- HTML 示例:
<input type="radio" name="gender" value="male"> Male - 特点：同名的一组单选按钮里只能选一个。
案例:制作单选按钮
1.代码
2.效果
-
复选框 (checkbox)
- 用途：当多个选项都可以被同时选择时使用。
- HTML 示例:
<input type="checkbox" name="interests" value="coding"> Coding - 特点：可以独立勾选，允许多个选择。
案例:制作一个复选框
1.代码
2.效果
-
普通按钮 (button)
- 用途：执行JavaScript代码或其他客户端脚本。
- HTML 示例:
<button type="button" onclick="alert('Button clicked!')">Click me</button> - 特点：不提交表单，通常用来触发脚本事件。
案例:制作一个普通按钮
1.代码
2.效果
鼠标悬浮
原始状态
-
提交按钮 (submit)
- 用途：将表单数据发送到服务器。
- HTML 示例:
<input type="submit" value="Submit form"> - 特点：点击后会触发表单的
onsubmit事件，并尝试提交表单数据。
案例:制作一个提交按钮
1.代码
2.效果
鼠标悬浮
原始状态
-
重置按钮 (reset)
- 用途：将表单中的所有元素恢复到初始值。
- HTML 示例:
<input type="reset" value="Reset form"> - 特点：清除表单内填写的所有内容。
案例:制作一个重置按钮
1.代码
2.效果.
原始状态
鼠标悬浮状态
-
文件上传框 (file)
- 用途：允许用户从本地计算机选择一个或多个文件进行上传。
- HTML 示例:
<input type="file" name="attachment"> - 特点：可以选择文件，并且可以通过表单提交到服务器。
案例:制作一个文件上传框
1.代码
2.效果
原始状态
鼠标悬浮状态
文件上传状态
-
Textarea 控件
- 用途：提供多行文本输入区域。
- HTML 示例:
<textarea name="message" rows="10" cols="30"></textarea> - 特点：可以设置行数和列数来控制大小，支持大量文本输入。
案例:制作一个Textarea控件
1.代码
2.效果图
-
select控件
- 用途：定义一个下拉列表。
- 属性：
name：指定 select 元素的名称，用于表单提交时识别。id：为 select 元素提供一个唯一的标识符。multiple：如果设置该属性，则允许用户选择多个选项（默认是单选）。size：当使用multiple属性时，可以设置可见选项的数量。required：标记这个字段为必填项。disabled：禁用下拉列表，使其不可选择。
案例:select的简单使用
1.代码
2.效果
