JAVA前端web开发学习资源（五，表单）

承接JAVA前端web开发学习资源（四，HTML标签学习：列表，表格）

文章目录

目录

文章目录

前言

一，Form表单

二，扩展（HTML5概念知识）【了解就好】

三，表单

1，input系列标签

2，扩展知识点补充：

1，占位框（文本框提示词）：

2，多文件选择

3，select下拉菜单

4，textarea文本域标签

5，label标签

总结

---

---

前言

本篇学习承接上篇JAVA前端web开发学习资源（四，HTML标签学习：列表，表格）。笔者此时已经即将学完CSS的基础知识。前端内容量极多，但是容易上手学习，所以学习速度很快。

个人推荐的学习方法是分为三步：

1，上网找资源学习，像听网课，找干货学习都是可以的。

2，实践操作，将学习到的知识实践，加深印象，在编译器上将当天学会的代码亲手打一遍。

3，回顾笔记，复习巩固：无论是什么人都不可能让只见过不到几面的知识做到几十年过目不忘，所以做好笔记复习尤为重要。例如，笔者将发表这篇博客作为第一轮回顾笔记的方法。倘若读者没有做笔记的习惯，可以培养抑或是将此文作为笔记观看乃是此文幸事。

接下来，今日的表单笔记可谓是HTML中最重要的知识点之一,也是HTML部分最后一部分了，用途广泛，是网站开发用的多的知识点，本文对表单的介绍比较详细，篇幅较长，倘若读者认为此篇讲的不错可以点一点小赞或收藏。

---

一，Form表单

Form表单可以说的上是input等系列标签不可缺少的部分，form表单类似于容器，input等为控件。

但Form表单本篇主要浅浅介绍，因为在学到网络时，读者才需要了解Form的全貌。

<form action="url" method="get|post" name="myform"></form>

属性说明：

action：服务器地址

name：表单名称

method：提交数据（在数据提交方式中，get提交的数据url可以看到，如果时post提交的就看不到。在使用方面：get一般用于提交少量数据，post用来提交大量数据。）

基础代码：<form></form>

二，扩展（HTML5概念知识）【了解就好】

HTML5出现前，将元素分为：块级元素，内联元素。

HTML5出现后，按照内容模型来区分，分为：元数据型(metadata content)，区块型(sectioning content)，标题型(heading content)，文档流型(flow content)，语句型(phrasing content)，内嵌型(embedded content)，交互型(interactive content)。

块级元素(div,form,hr,p,table等)	内联元素(a,b,em,i,span,strong等)
独占一行	不独占一行，只占自身大小
可以设置width,height属性	行内元素无法设置width,height属性
可以包含行内元素和其他块级元素	包含内联元素，不包含块级元素

三，表单

1，input系列标签

作用：在网页中显示收集用户信息的表单效果，如：登录页，注册页。

标签名：input

(input标签可以通过type属性值不同，展示不同效果）

type属性值

text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
file	文件选择，用于上传文件
submit	提交按钮，用于提交
reset	重置按钮，用于重置
button	普通按钮，默认无功能，之后配合js添加功能

其他属性

name	元素名称，name的值代表当前input的元素名称
value	元素默认值
style	为input元素设定CSS格式
width	当input type="image"时，通过width控制宽度
height	当input type="image"时，通过height控制高度
maxlength	定义input元素中可输入的最长字符数

input type属性与代码详解：

1，type="text"：创建单行文本输入框

<input type="text" size="20" maxlength="20" value="文本输入框">

2，type="password"：密码输入框

<input type="password" size="20" maxlength="20" >

 

 3，type="radio"：单选按钮

<label><input type="radio" >篮球</label>
  <label><input type="radio" >足球</label>

补充：要添加属性name="sex"才可单选。

4，type="checkbox"：复选框

<span>
  <input type="checkbox">北京
  <input type="checkbox">上海
  <input type="checkbox">广州
  <input type="checkbox">深圳
</span>

 

 5，type="button"：普通按钮（需要onclick处理程序）

<form>
  <div>账号<input type="text" placeholder="账号输入框" ></div>
  <div>密码<input type="password" ></div>
  <div><input type="button" value="确认" onclick=""></div>
</form>

6，type="submit"：提交按钮

 7，type="reset"：重置按钮

<form>
  <div>账号<input type="text" placeholder="账号输入框" ></div>
  <div>密码<input type="password" ></div>
  <div><input type="submit" value="提交" >&nbsp;<input type="reset" value="重置"></div>
</form>

 8，type="image"：图像按钮

<input type="image" src=" " width=" " height=" ">

9，type="hidden"：隐藏域

隐藏域在页面上不显示，用于存储和传递表单的值。当用户提交表单时，隐藏域的内容会一起提交给处理程序。

10，type="file"：文件域

文件域用于本地硬盘中上传文件提交

2，扩展知识点补充：

1，占位框（文本框提示词）：

作用：在网页中显示输入单行文本的表单控件。

type属性值：text

placeholder：占位符，提示用户输入内容的文本。

<form>
  <div>账号<input type="text" placeholder="账号输入框" ></div>
  <div>密码<input type="password" ></div>
  <div><input type="submit" value="提交" >&nbsp;<input type="reset" value="重置"></div>
</form>

2，多文件选择

作用：在网页中显示文件选择的表单控件。

type属性值：file

multiple：多文件选择

<input type="file" multiple>

3，select下拉菜单

作用：在网页提供多个选择项的下拉菜单表单控件。

标签组成

标签	作用
select	下拉菜单的整体
option	下拉菜单的每一项

常见属性：selected：下拉菜单默认选中。

<div>
  <select>
    <option>北京</option>
    <option selected>上海</option>
    <option>广州</option>
    <option>深圳</option>
  </select>
</div>

4，textarea文本域标签

作用：在网页中提供可输入多行文本的表单控件。

标签名：textarea（双标签）

常见属性：

cols：规定了文本域内可见宽度。

rows：规定了文本域内可见行数。

 注意：右下角可以拖拽改变大小，实际开发时针对样式效果推荐使用CSS设置。

5，label标签

作用：常用于绑定内容域表单标签的关系，提高用户体验，点字可以勾选表单。

标签：label

使用方法一：

<input type="radio" name="sex" id="nan"><label for="nan">男</label>

使用方法二：

<label><input type="radio" name="sex">女</label>

---

总结

HTML的学习到这里就结束了，我用了五篇文章来简述了HTML的基础语法。接下来我将继续更新CSS的基础语法。谢谢大家的阅读。