本文深入探讨了HTML表单元素的功能、属性及应用，包括form、input、type等元素的用法，以及常见属性如action、method、type等的详细说明，并通过实例展示了如何构建基本表单。
form元素
a.用来定义一个表单，是建立表单的基础元素（就类似定义表格的table）
b.表单的其他元素包含在form元素中，其主要子元素有：input/button/select......
form元素的属性
a.action：指表单的发送地址（服务器地址）
b.method：表单数据发送至服务器的方法，常用的有两种：get/post
提交方法get和post区别
a.数据恢复在网址之后主动提交给服务器
b.数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理
input元素
a.用来设置表单中的内容项，比如输入内容的文本框，按钮等
b.不仅可以布置在表单中，也可以在表单之外的元素使用
form元素的属性
a.type：指定输入内容的类型，默认为text：单行文本框
b.name：输入内容的识别名称，传递参数时候的参数名称
c.value：默认值
d.maxlength：输入的最大字数
e.readonly属性：只读属性，设置内容不可变更，提交时会提前发送至服务器
f.disable:设置为不可用（不可操作）
g.required:设置该内容为必须填写项，否则无法提交
......
type元素的属性（默认为text）
a.password:密码状态输入
b.submit：提交按钮，点击将数据发送至服务器
c.reset：重置按钮
d.button：普通按钮
e.imge:图片式提交按钮
e.hidden:隐藏字段。该内容不会显示页面上；；一般为网页设计者的变量数据，提交时，隐藏内容会提交的服务器；；
f.mail:表示要输入一个电子邮箱。不同的版本提示效果可能有差异
g.url:表示要输入一个网址
h.tel:表示输入的内容是一个电话号码
j.number:可以配合input的max/min/step/value/规定允许输入的最大值/最小值/步长/默认值
k.range(活动条)：可以配合input的max/min/step/value/规定允许输入的最大值/最小值/步长/默认值，但是以一个活动条的状态显示
type元素
*用来建立一个下拉菜单选项列表，其具体列表项要通过option元素建立：1.option元素可以用来建立一个选项，即下拉列表的一个菜单项；2.outgroup用来对option元素进行组合分组
*不仅可以在表单中使用，还可以在其他元素和内联元素中使用
*sizes用来定义列表中显示的列表项
*multiple属性用来定义是否可以多选
*可以添加disable和autofocus属性
tadalist元素
*用来建立一个选项列表，其内容不会直接显示在网页上，只是会在用户输入时作为候选项，通常与input组合使用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>13课<title>
</head>
<body>
<form action="dz.html" target="blank">
<input type="hidden" value="统计" name=“tj”>
用户名：<input type="text" name="user" name="user" value="请输入用户名"><br><br>
密码：<input type="pssword" name="ps" name="password"><br><br>
国家：<input type="text" readonly=“readonly” name=“gj” value="中国"><br><br>
提示：<input type="text" disabled="disabled" value="请慎重填写">
<input type="submit"><input type="reset"><input type="button" value=“按钮”>
</form><br>
<div>
<input type="pssword" maxlength="8">
<input type="submit" value="确定">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>13课<title>
</head>
<body>
<h3>火锅店开业<h3>
<form id="myform" name="myform" action="" method=“”>
邮箱：<input type="email" name="email" required><br><br>
我们的网址是什么？<input type="url">
<input type="image" src=“../img/ding.png” alt="">
</form>
<figure>
<img src="../img/hg.png" alt="">
</figure>
</body>
</html>
<DOVTYPE! html >
<html lang="zh-cn">
<head>
<meta charest="UTF-8">
<title>14课</title>
</head>
<body>
</body>
</html>
扫一扫
3217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
