表单标签 form 的使用

709 阅读3分钟

一,什么是表单

  • 可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁。如下图:

经典表单

二,表单标签<form>

  • 所有的表单内容都应放在标签内部,如下图:

form标签

  • 如上图所见,表单标签<form>有两个属性actionmethod 1.action:这个属性规定该表单提交的信息存储的文件以及它的地址,例如:

此时该表单提交的信息就会存储在XXX.php文件里
2.method:这个属性规定该表单的提交方式,方式有两个get/post,默认是get PS:getpost的不同点: ①:提交数据的方式不同,get可以再url上看到提交的数据,post会在url上隐藏提交的数据; ②:get只能提交少量数据,数据的容量是1k以内;post可以提交大量数据,但是不能超过服务器的容量; ③:get提交的数据会显示在浏览历史中,安全性比post要差; ④:post是给:一般用于账号密码的输入;get是要:一般用于搜索引擎的关键词提交;

三,输入标签<input>

  • 用处:<input>标签一般用于给用户输入信息,服务器收集用户输入的信息;
  • <input>标签的用法 1.用户名<input type = "text" name="username">,和密码框一样都是单行输入框,用于给用户输入账号用户名之类; 效果:
    用户名输入
    2.密码框<input type = "password" name="password">,用于给用户输入密码,输入后信息会被伪装成小圆点; 效果:
    密码框输入后信息被伪装成小圆点
    3.单选框<input type = "radio" name="sex" value="男"> ,用于给用户选择只能选择一项的选择, PS: ①:单选框name属性必须要有,且每个选项的name值必须相同; ②:value属性的值也要有,否则提交后服务器显示的是on,就不能获悉提交的内容是什么; 效果:
    单选框

4.复选框<input type = "checkbox" name="car" value="奥迪">,多项选择 PS:复选框name属性的值可以不一样,但是推荐一样方便用于分类; 效果:

复选框

5.文件上传<input type="file" name = "上传文件的在服务器的名字" accept="规定文件类型">,用于给用户上传文件 效果:

文件上传

6.隐藏域<input type="hidden" name = "上传到服务器该数据的key" value="上传到服务器该数据的值"> 用户看不见这个区域,常用于暂存数据和安全性校验;

四,下拉菜单标签<select><option>

  • 用法:

下拉菜单

  • 效果:

~~~~~~~~~~~~~~~

五,文本域< textarea >

  • 用法:
    常用于评论和留言

六,标签

  • 用法:给输入框起名,并且点击这个名字就能自动跳转到该输入框,有for属性,链接该标签的标签要填写id属性,并且id属性的值和for属性的值要相等;
  • 图示:
    label标签用法

七,一些常用的<input>标签属性

  • placeholder:用于提示用户该输入框内容,如下:

placeholder

  • selected:默认选项,未选择情况下默认选择该选项,如下:

selected

  • maxlength:规定输入框的最大输入字数,如下:

maxlength

  • disabled:该输入框禁止输入,如下:

disabled