HTML入内基础3:表单

1  表单的应用

网站的用户名注册和登录。主要用来接收用户提交的信息,并把信息提交给服务器,实现客户端和服务器的交互。

2  表单基本语法

使用form标签。表单的所有元素,包括文本域、单选框、复选框、按钮、列表等等,都要包含在form标签内。具体的表单元素如下:


HTML入内基础3:表单_第1张图片

2.1  input标签

单标签,语法:
其中,type的属性值有很多种,每种对应一种表单元素。

HTML入内基础3:表单_第2张图片

input的单行文本域
基本语法:
其他可选属性:
HTML入内基础3:表单_第3张图片

input的密码框
基本语法:
密码域也是单行文本域的形式,只不过输入其中的信息以圆点的形式显示。

input的文件域
基本语法:
功能是让用户可以上传本地电脑的文件。不同的浏览器的显示效果不同。

input的单选框
基本语法:
例如,选择性别的单选框:

注意:(1)男、女是要写到input标签外面的,input标签的表现形式就仅仅是那个圆点。(2)value值的作用是提交到服务器的值。(3)同一组的name属性值一定要一样,这样才能保证是单选,否则就可以多选了。(4)checked属性的作用是默认选中,哪个input标签设置了checked,哪个单选框就是默认被选中的状态。

input的复选框
基本语法:
例如一个关于爱好的复选框:

读书 唱歌 跳舞

注意:(1)具体的爱好是要写到input标签外面的,input标签的表现形式就仅仅是那个方点。(2)value值的作用是提交到服务器的值。(3)同一组的name属性值没有要求一定要一样,但是规范起见,最好保持一致。(4)checked属性的作用是默认选中,哪个input标签设置了checked,哪个单选框就是默认被选中的状态。

input的按钮

图像按钮是为了让按钮看起来更美观,而插入的一张图片形式的按钮。功能和提交按钮相同。

input隐藏域
假如我们需要提交一些信息给服务器,但是还想隐藏它们,可以使用隐藏域。当用户点击提交按钮后,信息就会提交到服务器。

2.2  下拉菜单和列表标签select和option

基本语法:


这里的value属性值的作用和上面的都一样,是提交到服务器中的值。
select标签的可选属性:


HTML入内基础3:表单_第4张图片

如果设置了size属性,则显示方式由只显示一项的下拉菜单变为显示多项的列表形式。
option标签可选属性:



例子:
  下拉菜单:
   

  列表:
   

分组下拉菜单和列表标签optgroup
可以对菜单里的各个项进行分组划分。
例子:

HTML入内基础3:表单_第5张图片

2.3  多行文本域textarea

基本语法:


textarea标签的可选属性:


HTML入内基础3:表单_第6张图片

3  表单form标签属性

表单的作用是把用户输入的信息提交到服务器上,那么如何提交?提交到服务器上哪里?如何处理数据?这些是需要在form标签的属性中进行设置的。
基本语法:

表单元素
HTML入内基础3:表单_第7张图片

action属性定义的是把表单内容提交到服务器上的一个处理程序的URL地址,即“给谁”。
method属性定义提交的方式,即“怎么给”。如果利用get方式提交,使用URL传递参数,用户的提交信息会被放到action指定的URL地址后面,会暴露在浏览器的地址栏中。发送的信息有数量的限制,一般用于信息的获取。而使用post方式,表单数据会作为HTTP请求体的一部分,不会暴露出来;对发送信息的数量无限制,一般用于提交和修改服务器上的数据。

你可能感兴趣的:(HTML入内基础3:表单)