HTML 笔记 —— 表单，java 数组的底层原理
HTML 表单用于搜集不同类型的用户输入
HTML 表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
< input > 元素
< input > 元素是最重要的表单元素。根据不同的 type 属性，< input > 元素会有不同的功能
例如（当然不止这些，这个表格中只是部分内容）：
常规文本输入，密码框，提交表单，清空表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单 form
action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
method:post,get 提交方式
get 方式提交,我们可以在 url(浏览器的地
址栏)看到我们提交的信息,不安全,但是高效
post 方式比较安全,可以传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入流:
input 标签
type 默认是 text,作用是在页面上显示一个文本输入框
是 password 时,作用是产生一个密码输入框
type 的值不同,对应的内容不同,内容可以是密码框,多选框等
name,命名代表 input 标签叫什么名字,方便网页去接收
value,默认值
maxlength,是最长能写几个字符
size,是文本输入框的大小长度
-->
<p>姓名: <input type="text" name = "uesrname" value="默认值" maxlength="8" size="30"> </p>
<p>名字:
<input type="text" name="username" value="admin" readonly>
</p>
<p>密码: <input type="password" name = "pwd" > </p>
<p>
<input type="submit" value="提交表单">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
name 和 value 属性的区别
name 是控件的名称，多个空间可以取同一个名称
这个名称可以让我们对这个控件进行操作，比如锚链接里面，就可以通过一个控件的名称，跳转到该控件所在的位置
value 是控件的值，不同的控件的 value 的作用不同
（1）type 等于 button、reset、submit 时，value 是显示在按钮上的文本内容
（2）type 等于 text、password、hidden 时，value 是默认显示的初始值
（3）type 等于 checkbox、radio、image 时，value 是与输入相关联的值
name 属性还有一个作用，当填写好表单里面的信息后，点击提交表单，可以在浏览器的地址栏看到这些表单的信息（前提是 form 标签的属性 method 的属性值是 get）
这里的 username 就是第一个控件，用来输入姓名的文本框的名字
这里是以键值对的形式打印在地址栏，如果没有 name 属性相当于没有 key 值，也就无法打印
比如我删去第一个 input 标签里面的 name 属性，再提交一次表单，结果为
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单 form
action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
method:post,get 提交方式
get 方式提交,我们可以在 url(浏览器的地址栏)看到我们提交的信息,不安全,但是高效
post 方式比较安全,可以传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入流:
input 标签
type 默认是 text,作用是在页面上显示一个文本输入框
是 password 时,作用是产生一个密码输入框
type 的值不同,对应的内容不同,内容可以是密码框,多选框等
name,命名代表 input 标签叫什么名字,方便网页去接收
value,默认值
maxlength,是最长能写几个字符
size,是文本输入框的大小长度
-->
<p>名字:
<input type="text" name="username" value="admin" readonly>
</p>
<p>密码: <input type="password" name = "pwd" hidden> </p>
<!--单选框
type = "radio"
value : 单选框的值
name : 表示组
checked 默认选中
-->
<p>性别:
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
type = "checkbox"
checked 默认选中
-->
<p>爱好:
<input type="checkbox" value="sleep" name="favorite">睡觉
<input type="checkbox" value="chat" name="favorite">聊天
<input type="checkbox" value="code" name="favorite" checked>敲代码
<input type="checkbox" value="game" name="favorite">打游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
按钮的 value 值是浏览器上显示的按钮名称,前面的单选框和多选框显示的都是<input>后面的名称
例如<input type="radio" value="boy" name="sex"/>男显示的是男而不是 boy
-->
<p>按钮
<input type="button" name="btn1" value="一个按钮">
<input type="image" src="../resources/image/图片 2.png" width="400px" height="300px">
</p>
<!--下拉框,列表框 select 标签
selected 将这一选项作为默认值
-->
<p>国家:
还未添加个人签名 2021.03.18 加入
还未添加个人简介
评论