HTML表单的相关应用

网页注册等场景的制作，收集用户输入的信息

表单基本结构

表单语法

<form>
    表单元素 <!--将表单元素内容收集后提交给服务器-->
</form>

表单元素内容：

文本域
单选框
按钮
列表
...

注：表单本身不可见，页面只显示表单元素的内容

form表单标签

标签	描述
input	表单输入标签
select	菜单和列表标签
option	菜单和列表项目标签
textarea	文字域标签
optgroup	菜单和列表项目分组标签

input标签（单标签）

<input type="类型属性" name="名称" ..../>

简单代码实现

代码实现结果

单行文本域

属性	描述
name	文字域的名称
maxlength	用户输入的最大字符长度
size	指文本框的宽度，以字符个数为单位，文本框的缺省宽度为20个字符
value	指定文本框的默认值
placeholder	规定用户填写输入字段的提示

密码域同样也算文本域

文件域语法

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

不同浏览器页面显示效果不同

单选框语法

<form>
    <input type="radio" name="" value="" checked />
</form>

同一组的name值要相同---只能选择一个内容 value 当提交信息之后，会将选中的值返回给电脑 checked 默认选择的值

复选框语法

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

多选框中，name值名字是否一样并不影响页面中的选择结果，但是为了使服务器避免出现差错，通常还是使用相同的name名，不同的多选项，电脑则通过name值的不同来分辨

一个小型注册信息的练习代码：

成果：

按钮语法

<input type="button" name="" value="" />与js相互应用
<input type="submit" name="" value="" />提交
<input type="reset" name="" value="" /> 恢复初始状态

图像域（图像提交按钮）语法

<input type="image" name="" scr="imageurl" />

在这里，两个按钮功能相同，均为提交信息

隐藏域语法

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

页面不显示该隐藏域，但是提交后会向服务器提交相应内容

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

节约空间

语法：

<select>
    <option value="">选项</option>
    <option value="">选项</option>
</select>

一个option对应一个选项，适用于选项较多的情况实现结果类似这种

select标签属性

属性	描述
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标签

<textarea name="" rows="" cols="">
    内容
</textarea>

属性	描述
name	设置名称
placeholder	设置描述文本区域yu'qi'zhi

表单页面调整

<form action="" method="" name="" >
    表单元素
</form>

form标签

get 将提交的数据暴露在url之后，并且用&连接，保密性差 post 不暴露提交内容

编码方式

application/x-www-form-urlencoded 默认方式

multipart/form-data 不对字符进行编码

text/plain

HTML3--表单