1.input单行输入框
input:定义输入框、按钮等,单标签。
type:定义input的类型(值不同对应的input的功能或样式都会发生改变。)
值:
text:文本输入框。
password:定义密码输入框,输入的内容会被掩盖。
button:定义按钮。
submit: 定义提交按钮。
reset:重置按钮,清除表单内所有的数据。
file:文件提交按钮,供文件上传。
image:定义图片形式的提交按钮,必须把src和image结合使用。
checkbox:定义复选框
radio:定义单选框
value:定义input的初始值。
required:必填项,不能为空。
readonly:只读模式,无法输入,只能阅读。
disabled:禁用input元素。
placeholder:定义文本输入框的提示。
name:定义输入框的名字,唯一。
maxlength:定义输入框可以输入的最大字符。
size:定义文本输入框的宽度。
补充: label: 给input添加的标注。
for: 为了让input和label进行绑定。
for的值要和input的值相同,当点击label时,可以让input自动获得焦点
2.textarea多行文本框
textarea:定义多行文本框
cols: number,规定文本区内的可见宽度
rows: number,规定文本区内的可见高度
3.单选框多选框下拉框
checkbox:定义复选框
radio:定义单选框
fieldset:将表单内容进行分组,会产生一个边框(默认为2px,内边距(10px,12px),左右外边距2px)
legend:legend时fieldset元素定义的标题(默认在分组边框的上边框内,可以左右移动位置);
select:定义下拉菜单。
optgroup:定义选项组。
option:定义列表中的一个选项内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="#">
<!-- form表单
action:当表单提交的时候,将数据发往哪里
-->
<div>
<!--
input:定义输入框、按钮等,单标签。
type:定义input的类型(值不同对应的input的功能或样式都会发生改变。)
值:
text:文本输入框。
password:定义密码输入框,输入的内容会被掩盖。
button:定义按钮。
submit: 定义提交按钮。
reset:重置按钮,清除表单内所有的数据。
file:文件提交按钮,供文件上传。
image:定义图片形式的提交按钮,必须把src和image结合使用。
checkbox:定义复选框
radio:定义单选框
value:定义input的初始值。
required:必填项,不能为空。
readonly:只读模式,无法输入,只能阅读。
disabled:禁用input元素。
placeholder:定义文本输入框的提示。
name:定义输入框的名字,唯一。
maxlength:定义输入框可以输入的最大字符。
size:定义文本输入框的宽度。
-->
<!--
label: 给input添加的标注。
for: 为了让input和label进行绑定。
for的值要和input的值相同,当点击label时,可以让input自动获得焦点
-->
<label for="account">账号:</label>
<input type="text" name="account" id="account" value="" placeholder="请输入账号:" required maxlength="10" size="20px">
<br>
<label for="password">账号:</label>
<input type="password" name="password" id="password" value="" placeholder="请输入密码:" required maxlength="16" size="20px">
<br>
<!--
textarea:定义多行文本框
cols: number,规定文本区内的可见宽度
rows: number,规定文本区内的可见高度
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit">
<hr>
</div>
<div>
<!--
button:定义可点击的按钮
value:按钮的标题
-->
<input type="button" value="登录"><br>
<!--
submit:定义提交按钮,会把表单内的数据提交给服务器
-->
<input type="submit" name="" id=""><br>
<!--
reset:重置按钮,清除表单内所有的数据。
-->
<input type="reset" name="" id=""><br>
<!--
file:文件提交按钮,供文件上传。
accept:规定文件上传的类型,text/*文本类型
-->
<input type="file" accept="image/*">
<br>
<!--
image:定义图片形式的提交按钮,必须把src和image结合使用 -->
<input type="image" src="../../2022_7_13/练习/daxue.png" alt="提交按钮">
</div>
<div>
<!-- 多选框 -->
<!--
checkbox:定义复选框 -->
<label for="checkbox1">多选框1</label>
<input type="checkbox" id="checkbox1">
<label for="checkbox2">多选框1</label>
<input type="checkbox" id="checkbox2">
<!-- 单选框
radio:定义单选框
-->
性别:
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
<!--
fieldset:将表单内容进行分组,会产生一个边框(默认为2px,内边距(10px,12px),左右外边距2px)
legend:legend时fieldset元素定义的标题(默认在分组边框的上边框内,可以左右移动位置);
-->
<fieldset>
<legend>分组标题</legend>
</fieldset>
<!--
select:定义下拉菜单。
optgroup:定义选项组。
option:定义列表中的一个选项内容。
-->
<select name="" id="">
<optgroup label="上午">
<option value="1">上课1</option>
<option value="2">上课2</option>
<option value="3">上课3</option>
<option value="4">上课4</option>
<option value="5">上课5</option>
<optgroup label="上午">
<option value="1">上课1</option>
<option value="2">上课2</option>
<option value="3">上课3</option>
<option value="4">上课4</option>
<option value="5">上课5</option>
</optgroup>
</select>
</div>
</form>
</body>
</html>