表单

表单

1、form标签

form属性：

（1）表单名称name，区分表单

（2）提交表单action，action用于指定表单数据提交到哪个地址进行处理。

（3）传送方法method，这两种方式的区别在于，get在安全性上较差，所有的表单域的值直接显示出来。而post除了只有可见的处理脚本程序之外，其他的信息都可以隐藏。所以实际的开发当中通常都选择post这种处理方式。

method属性值	说明
get	默认值，表单数据被传送到action属性指定URL，然后这个新URL被送到处理程序上
post	表单数据被包含在表单主体中，然后被传送到处理程序上

<form name="form1" action="dd@foxmail.com" method="post"></form>

（4）目标显示方式target，指定目标窗口的打开方式。

target属性值	说明
_self	默认值，表示在当前的窗口打开页面
_blank	表示在新的窗口打开页面
_parent	表示在父级窗口中打开页面
_top	表示页面载入到包含该链接的窗口，取代当前在窗口中的所有页面，因此其他所有

（5）enctype设置表单信息提交的编码方式。

enctype属性值	说明
application/x-www-form-urlencoded	默认的编码方式
multipart/form-data	MIME编码，对于“上传文件”这种表单必须选择该值

2、表单对象

① input；②textarea；③select和option

3、input标签

type属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7uhQPGWT-1612604601783)(image/image-20201118212937888.png)]

（1）text

文本框text属性	说明
value	定义文本框的默认值，也就是文本框内的文字
size	定义文本框的长度，以字符为单位
maxlength	设置文本框中最多可以输入的字符数

（2）password

属性同text

（3）单选按钮radio，对于同一个问题的不同选项必须要设置一个相同的name属性值。

<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"/>

（4）复选框checkbox

<input type="checkbox" value="复选框取值" checked="checked"/>
//表示label指向id为checkbox1的复选框
<input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">苹果</label>

（5）button、submit、reset

<input type="button" value="按钮" onclick="alert('你点击了按钮！')">

（6）图片域imag

<input type="image" src="图像的路径"/>

我们完全可以用图片域image来实现各种漂亮的按钮，但是在前端开发中，我们更多的是使用CSS3来实现。因为前端有一个不成文的规定是，图片往往数据传输大，对于页面效果能不用图片就尽量不用图片，而是尽量使用CSS来实现。

（7）hidden

可以在后台程序传递一些数据（value）

（8）file

当使用文件域file时，必须在form的标签中说明编码方式“enctype=“multipart/form-data”

4、textarea

<textarea rows="8" cols="40">请介绍一下你自己</textarea>

5、下拉列表

<select>
    <option>选项显示的内容</option>
    ……
    <option>选项显示的内容</option>
</select>

标签属性	说明
multiple	可选属性，只有一个属性值"multiple"。默认情况下下拉列表只能选择一项，当设置multiple=“multiple”时，下拉列表可以选择多项
size	下拉列表展开之后可见列表项的数目

标签属性	说明
value	选项值
selected	是否选中

6、Visual Studio中的HTML控件

iframe

浮动框架，说白了就是在一个页面嵌入一个或多个子页面

<iframe src="浮动框架的源文件" width="400px" height="300px" scrolling="auto"></iframe>

ame

浮动框架，说白了就是在一个页面嵌入一个或多个子页面

<iframe src="浮动框架的源文件" width="400px" height="300px" scrolling="auto"></iframe>

注：推荐绿叶学习网，此文章为在该网站学习过程中整理