首页 > 其他分享 >【HTML】第七讲:表单的创建

【HTML】第七讲:表单的创建

时间:2023-11-18 17:32:28浏览次数:34  
标签:第七 单选框 元素 文本框 表单 HTML 复选框 属性

不积跬步无以至千里!@放纵lili

表单是由一对<form>标签定义。

一、<form>标签的基本语法:

【HTML】第七讲:表单的创建_HTML

当然<form>标签,还有其它属性,这几个是最为基本。下面是以上几个属性的描述。

1、name="   "用于设置表单名称
2、method=“  ”定义表单数据从客户端送到服务器的方法,有两种:

get和post。get方法不具有保密性,post方法具有保密性。一般默认是get方法。

3、actinotallow=“  ” 用于指定处理表单的服务端程序,简单来说就是提交地址。

二、input元素。

表单input元素包括文本框、密码框、单选框复选框、按钮等,这些都需要使用<input>标签来创建,接下来我会就这些表单元素,进行讲解,学会做这些之后,一个简单的表单就可以制作出来了!

【HTML】第七讲:表单的创建_表单_02

1、type=“   ”属性

首先要先讲type属性,它是<input>中一个很重要的属性。用于设置不同类型的输入元素,具体有:

                         (1)、text   设置单行文本框元素

                         (2)、password   设置密码元素

                         (3)、radio  设置单选框元素

                         (4)、checkbox   设置复选框元素

                         (5)、 button  设置普通按钮元素

                         (6)、submit   设置提交按钮元素

下面就开始表单制作的学习。

(1)text文本框

首先现介绍常用几个常用表单元素: palaceholder="  "用于提示输入的是什么内容。

【HTML】第七讲:表单的创建_表单_03

【HTML】第七讲:表单的创建_HTML_04

name=''    ''设置文本框的名称,value=“   ”设置文本框的默认值。

【HTML】第七讲:表单的创建_表单_05

vulue=''   ''属性在这里体现不出来作用,在下面的将多选时,会体现。

之后就是   size=“   “控制文本框的长度,单位是像素、maxlength="   "设置在文本框中最大多可输入的字符长度。

【HTML】第七讲:表单的创建_表单_06

【HTML】第七讲:表单的创建_表单_07

(2)password  密码框

当type属性取值为“password”时,<input>标签将创建一个密码框,以“ * "或“  . ”符号回显输入的字符,从而起到保密的作用。

基本语法:

【HTML】第七讲:表单的创建_HTML_08

密码框具有和文本框一样的属性,作用也是一样的。

但密码框能将用户输入的内容进行加密

【HTML】第七讲:表单的创建_HTML_09

【HTML】第七讲:表单的创建_HTML_10

(3)radio 单选框

当type属性取值为“ radio”时,<input>标签将创建单选框。单选框用于一组选项中选择单项,每个单选框用一个圆框表示。

【HTML】第七讲:表单的创建_HTML_11

示例:

【HTML】第七讲:表单的创建_表单_12

【HTML】第七讲:表单的创建_HTML_13

(4)checkbox 复选框

当type属性取值为“checkbox”时,<input>标签将创建复选框。复选框用于在一组选项中选择多项,每个复选框用一个方框表示。

基本语法:

【HTML】第七讲:表单的创建_表单_14

【HTML】第七讲:表单的创建_HTML_15

(5)button 普通按钮

button 按钮用于激发提交表单动作

基本语法:

【HTML】第七讲:表单的创建_表单_16

示例:

【HTML】第七讲:表单的创建_表单_17

【HTML】第七讲:表单的创建_HTML_18

(6)submit 提交按钮

提交按钮用于将内容提交给指定服务器处理程序或指定客户端脚本进行处理。

基本语法:

【HTML】第七讲:表单的创建_表单_19

示例:

【HTML】第七讲:表单的创建_表单_20

这节简单地把表单的内容梳理了一遍,课后要多加练习才能加强记忆和熟练度。








标签:第七,单选框,元素,文本框,表单,HTML,复选框,属性
From: https://blog.51cto.com/u_16292324/8464050

相关文章