HTML表单的用法

<meta charset="utf-8">

html表单的作用是收集不同类型的用户输入,然后提交到服务器。

form标签有几个重要的属性:

1.action:表单提交的地址

2.method:提交表单的方法

3.target:在何处打开action

4.enctype:发送到服务器时的编码方式,如

  • application/x-www-form-urlencoded:默认的编码方式,但是在用文本的传输和MP3等大型文件的时候,使用这种编码显得效率低下
  • text/plain:纯文本的传输,空格转换为“+”,但不对特殊字符编码
  • multipart/form-data:指定传输数据为二进制类型,如图片,MP3,文件,在使用包含文件上传控件的表单时,必须使用该值

form表单中的常用标签:

1.input:所有的input都必须有name,不然后端无法准确接收到该数据;一些常用的type属性如下:

text:输入文本

password:输入内容自动变成圆点

checkbox:多选框。同一个多选框内,不同选项的name应相同,但是value的值需不同,以便于后台区分不同的选项

radio:单选框。同样需要用不同的value来区分两个选项

file:文件上传。

button:按钮。

submit:提交。

reset:清空当前所有输入

2.label:在输入框前添加文字。label for的作用:在鼠标点击该label时,会focus到目标输入框,如下图


label.jpg
label2.jpg

当鼠标点击“姓名”时,后面的输入框会进入编辑状态

3.select:下拉菜单。下拉菜单中的选项用option标签,如下图:

select.jpg

其中的selected指默认选择该option

4.textarea:多行文本。如果想在输入框中写入提示信息,可以用到placeholder属性,如

placeholder.jpg
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 3,199评论 0 1
  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 3,933评论 1 1
  • 什么是form表单 表单在网页中主要负责数据采集功能,把用户填写的信息提交到网站的后台服务器。 form标签的常用...
    ezrealor阅读 1,911评论 0 0
  • HTML 表单用于搜集不同类型的用户输入。 元素定义 HTML 表单,相当于表单的外壳,用于把用户输入的不同类型...
    lingfighting阅读 3,214评论 0 1
  • 早晨的阳光明媚灿烂,像个待字闺中的姑娘,终于出来了。天气比昨天要温和很多,不知是不是昨天来了个独特的下马威般的欢迎...
    微笑的百合花阅读 4,104评论 1 1