提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、表单元素form
• 二、form元素的属性
• • 1.action
  • 2.method
  • 3.enctype
  • 4.注意事项
• 三.input元素
• • 1.input元素是什么？
  • 2.type
  • • 2.1 text
    • 2.2 password
    • 2.3 radio
    • 2.4 checkbox
    • 2.5 button
    • 2.6 submit
  • 3.其他属性
  • • 3.1 name
    • 3.2 value
    • 3.3 placeholder
    • 3.4 disabled
    • 3.5 readonly
  • 4.textare元素
  • 5.select元素及option元素
• 总结

---

前言

表单以及表格一般应用在登陆界面或者注册界面

定义表单

一、表单元素form

form元素：通常我们会将整个表单元素放在form中，其作用是将所有form元素中的表单内容都提交到服务器

简单写一个表单代码：

浏览器打开：

二、form元素的属性

1.action

规定了当表单发出提交请求时数据应当提交的位置，例如：

这就是向www.baidu提交表单。

2.method

规定了表单数据提交的方式，其中最常用的两种：
1.get
这种提交方式是显示提交，用户的数据会直接显示在地址栏中
2.post

这种提交方式属于隐式提交，用户的数据通过打包的形式提交，在地址栏不会显示出来

3.enctype

enctype属性定义表单进行编码的方式
一般默认值为application/x-www-form-urlencoded，而另一种multipart/form-data是在上传文件时使用

4.注意事项

注：
1.实际上，method的两种显示方式的安全程度是一样的，隐式提交并不会比显示提交要安全。
2.form元素是功能元素，在开发静态页面时意义不大

三.input元素

1.input元素是什么？

标签用于搜集用户信息。
根据不同的 type 属性值，在input框中可以输入文字、密码，也可以是单选框、多选框、按钮。这样的分类可以方便信息的搜集。

2.type

type属性是input元素最重要的属性，它直接确定输入框的类型
接下来介绍几种常用的type属性：

2.1 text

如图：
显示：

框中可以输入文本或数字，一般用于登陆界面中的帐号输入

2.2 password

如图：
显示：

password一般用于登陆界面的密码输入框，在这个框内输入的文本或数字是不可见的，会以*号显示。

2.3 radio

如图：

显示：

radio用于单选框，一般在性别选择时使用。

2.4 checkbox

如图：
显示：

checkbox是多选框，一般选择爱好等可以选择多个时使用。

2.5 button

如图：
显示：
button只是单纯的按钮，没有具体功能。

2.6 submit

如图：

显示：

将整个表单提交给服务器。

3.其他属性

3.1 name

name属性是元素的名字，在服务端使用，只有在radio中使用时具有分组功能。

3.2 value

输入框的值，当没有设定value时，直接提交文本内容。

3.3 placeholder

在输入框中显示提示的文本，但是文本框只会有显示，不会有内容。

3.4 disabled

当input框加载时禁用此元素。

3.5 readonly

框内文本无法更改，是程序员自己设定的，只能看。

4.textare元素

如图：

显示：

标签定义多行的文本输入。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。可以通过 cols 和 rows 属性来规定 textarea 的尺寸。

5.select元素及option元素

一把元素是嵌套在元素中使用，可以说是固定搭配，
如图：

总结

表单的学习主要需要弄清楚元素的属性，多看多练，才能熟练掌握。