表单基本机构

应用

主要用于邮箱和社交账户注册和登陆

作用是接收用户所提交的信息

工作原理如下：

语法：

<form>
    表单元素
</form>

表单元素包括：注意：表单本身不可见

3.1 表单元素：

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

3.1<input>标签

语法：\<input type="类型属性" name="名称".../>

注意：单标记（不成对）

type的属性值有这些：

types属性值	描述
text	文字域
password	密码域
file	文件域
checkbox	复选域
radio	单选域
button	按钮
submit	提交按钮
reset	重置按钮
hidden	隐藏域
image	图像域
举个栗子：

效果如下：

单行文本域

语法：

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

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

密码框

语法：

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

文件域

语法：

<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值没有限制，但是选择后value值会上传到服务器，所以最好一致。

按钮

语法：

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

value属性可设定按钮显示的字体

图像域

“图像提交按钮”，类似在提交按钮上贴上图像，仍然可以起到提交作用

语法：

 <input type="image" name="..." src="图片位置"/>

切记配合src使用

隐藏域

语法：

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

3.2 下拉菜单和列表标签

优点：节约网页空间

语法：

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

select标签

属性	描述
name	设置下拉菜单和列表的名称
multiple	设置可选择多个选项的功能
size	设置列表中可见选项的数目

option标签属性

属性	描述
selected	设置选项默认选中状态
value	定义送往服务器的选项值

optgroup标签

作用：设置分组下拉菜单和列表标签

<select name="...">
    <optgroup label ="1组的名字">
        <option value ="...">选项</option>
        ...
    </optgroup>
     <optgroup label ="2组的名字">
        <option value ="...">选项</option>
        ...
    </optgroup>
</select>

分组可以使选项更加清晰

多行文本域

语法：

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

属性	描述
name	设置文本的名称
placeholder	设置描述文本区域预期值的简短提示
rows	设置可见行数
cols	设置可见列数

给选项设置value是为了上传表单时，相应的name=输入按钮的value

3.3 表单属性

控制数据的传输形式和传输对象

语法：

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

action

值填 服务器地址 （例如XXX.php文件）

例如：<form action='asd.com'></form> 在提交表单时，表单信息会传给asd.com这个网址

method

get:

使用URL传递参数

对所发信息的数量也有限制

一般用于信息获取

post:

表单数据作为HTTP请求体的一部分

对所发信息额数量无限制

一般用于修改服务器上的资源

target

在何处打开action：

新的空白页打开(_blank)或者本页打开(_self)

enctype

发送前设置编码方式

3.0 HTML基础之表单