今天来给大家聊聊表单标签的说明以及简单使用,想要了解表单,首先我们要有一个基本认识,表单是干什么的

通过上图我们可以形象的看出,当我们访问一个含有表单的页面,我们输入表单的内容后,数据会发送到web服务器,然后服务器将数据交给我们的后台,后台处理完数据会回馈到我们的PC,这个时候大家一般就会看到注册成功之类的提示了。

表单的传输

<form action="" method="" name="" >
    ......
</form>
<form>标签
属性描述
actionurl提交表单对谁传送数据
methodget,post用什么方式发送到指定页面
nameform_name表单的名称
target_blank,_self,_parent,_top在什么地方打开action url
enctypeapplication,x-www-form-urlencoded-multipart,form-data-text,plain

发送表单之前如何对其进行编码(默认使用第一种方式编码;第二种是不对字符进行编码,要进行上传要用第二种编码)

get:使用url传输数据,保密性差,发送数据信息有限制,一般用来查询数据

post:表单数据作为请求发送,对发送信息数量没有限制,一般用来修改服务器上的资源,保密性相对get要好。

表单的语法

<form><!--表单页面是看不到的,我们只能看到表单内的页面元素
 
                         文本域
                         单选框
       表单元素   复选框
                         按钮
                         列表
                         ......
</form>


<form>标签元素
标签描述
<input>表单输入标签
<select>菜单和列表标签
<option>菜单和列表项目标签
<textarea>多行文本域标签
<optgroup>菜单和列表项目分组标签

下面给大家介绍一下各个标签的语法和作用

<input>

<input type="类型属性" name="名称" .../>   <!--这是一个单标签,大家注意/结束标签-->


<input>标签type属性
type描述
text文字域
password密码域
file文件域
checkbox复选域
radio单选域
button按钮
submit提交按钮
reset重置按钮
hidden隐藏域
image图像域


下面我给大家做一个简单的示例

<!DOCTYPE html>
<html>
<head>
	<title>漫步白月光之表单</title>
	<meta http-equiv="conteng-type" content="text/html; chraset=utf-8" />
</head>
<body>
	<form>
        帐号:<input type="text" name="username">
        密码:<input type="password" name="password">
        <input type="submit" name="sign">
	</form>

</body>
</html>

效果图如下,大家可以自己实际操作一番

现在我给大家介绍一下具体的表单标签

单行文本域

<form>
   <input type="text" name="..." .../>
</form>


单行文本域
属性描述
name文字域的名称
maxlength
最大字符长度
size文本框宽度,以字符为个数为单位。默认20个字符
value文本框的默认值
palceholder文字域提示


密码框

<form>
   <input type="password" name="..." .../><!--输入的密码会用小点的形式显示-->
</form>

文件域

<form>
  <input type="file" name="..."  .../>
</form>

单选框

<form>
   <input type="radio" name="..." value"..." checked /><!--同一组name值要相同-->
</form>

多选框

<form>
   <input type="checkbox" name="..." value"..."checked />
</form>

按钮

<input type="button" name="..." value="..." />
<input type="submit" name="..." value="..." />
<input type="reset" nmae="..." value="..." />

图像域

<input type="image" name="..." src="imageurl" /><!--图片具有按钮的作用-->

隐藏域

<input type="hidden" name="..." value="..." />

下拉和列表标签

<select>
     <option value="..." >内容</option>
     <option value="..." >内容</option>
     ......
</select>
<seclect>标签属性
属性描述
name下拉菜单和列表名称
multiple选择多个选项
size列表可见项目的数目
<option>标签属性
属性描述
selected初始选中状态
value定义送往服务器的数值

分组下拉菜单和列表标签

<select name="">
    <optgroup label="分组1">
        <option value="..." >内容</option>
        <option value="..." >内容</option>
         ......
    </optgroup>
    <optgroup label="分组2">
        <option value="..." >内容</option>
        <option value="..." >内容</option>
         ......
    </optgroup>
    ......
</select>

多行文本域

<textarea name="..." rows="..." cols="..." ...>
    ......
</textarea>
<textarea>标签属性
属性描述
name设置文本区名称
paceholder设置文本区的提示
rows设置文本区可见行数
cols设置文本区可见宽度

下面大家就来创建一个自己的表单吧~

示例如下


查看源代码

点我直达