【学习打卡】第8天 前端零基础入门 HTML表单

课程名称：前端零基础入门（体系课）

课程章节：第二章 表单元素/第三章 表单页面调整

主讲老师：(课程中没有显示)

课程内容：

今天学习的内容包括：

• input标签（图像域和隐藏域）

• select标签（下拉菜单和列表）

• 多行文本域<textarea>
  

• 表单页面的调整

• 总结

课程收获：

form表单标签

input输入框标签

type=text文本输入 password密码输入 radio单选框 checkbox多选框 file文件上传 image图像域 button按钮 reset重置按钮 submit提交按钮

textarea 文本域标签

select option 下拉选择框

optgroup 下拉选择菜单数据分组

action=提交的地址

method=提交表单时的提交方式

targrt=在哪个窗口提交表单

enctype=提交表单时的格式    

input标签（图像域和隐藏域）

• 图像域：<input type="image" name="image_button...."  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="...." /> 相当于一个图片形式的提交按钮

• 隐藏域：<input type="hidden" name="" value="" /> 可以向服务器上传一段信息，这段信息网页中看不到，也就是用户看不到。

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

1.下拉菜单和列表标签：

语法：

<select>

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

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

........

</select>

注意：value是用来给服务器传递信息的必须要写

2.<select>标签属性

<select name="..." size"..." multiple></select>

name：设置下拉菜单和列表的名称

multiple：可以在列表中选择多个选项（配合ctrl键）

size：下拉列表中可以显示的选项数目

注意：<select>标签中设置了multiple或size属性的话select是列表了，不是下拉菜单，不设置是下拉菜单，所以代码实现了一个列表，multiple多选，size显示可见选项数目

3.<option>标签属性

<option value="..." selected></option>

selected:设置选项为初始选中状态

value：定义送往服务器的选项值

列表=下拉菜单的属性里加上个size属性。

下拉菜单的属性里加上个mutiple属性可实现多选。

select标签(分组下拉菜单和列表)

<optgroup label="组名">

  <option> ......</option>

  <option> ......</option>

</optgroup>     

多行文本域<textarea>

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

多行文本域<textarea>的属性

name:设置文本区的名称

placeholder:设置描述文本区域预期值的简短提示

rows:设置文本区内的可见行数

cols:设置文本区的可见宽度

注：为了显示提示文字，初始状态下不要在<textarea></textarea>中间填写任何东西包括空格 

为了使页面美观，可以做一些调整：

这是一个n行2列的表格，所以左边一列都是设置右对齐，右边一列左对齐，最后一行因为是一列所以需要进行一个列的合并cosl="2" ,这样就如图所示了   

<form>标签的属性

action： （相对/绝对）URL URL 提交表单的目的地址或文件（后台文件php asp）

method:设置表单以何种方式发送到指定页面（get、post）  （get的保密性差，会将密码等数据暴露在后台）

name：表单的名字

target：在什么地方打开action URL（_blank、_self、_parent、_top）

enctype:在表单发送之前如何对其进行编码application /x-www-form-urlencoded multipart , form-data text ,plain

post和get的区别

get（保密性差）：

1）使用URL传递参数

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

3）一般用于信息查询获取

post（保密性好）：

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

2）对所发送信息的数量无限制

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

<form>表单总结

1.<input>标签属性：

type类型=如下↓

"text 文字域{

可用属性：name="text" value="文本框显示文字" size="文本框长度" placeholder="文本框提示文字" maxlength="最大输入字符限制"

}

textarea 多行文字域{

可用属性：name="命名" cols="列宽" rows="行高" placeholder="文本框提示文字",name（测试过，没什么效果，看后期）

}

password 密码域{

可用属性：name="password" value="密码框显示" placeholder="密码框提示" size="密码框长度" maxlength="密码框字符最大限制"

}

hidden 隐藏域{

可用属性：。。。听过课，没用过（#做个记号，后面看有什么用）

}

file 文件域 {

可用属性：name="file" value在这的具体功能不清楚，感觉也不需要其他的属性了...

}

radio 单选域{

可用属性：name="sex这个要设置一样，才能实现单选效果" value="nan告诉服务器性别" checked 默认选择

}

checkbox 多选域{

可用属性：name="区分类别yundong" value="yumaoqiu" checked 默认选择

}

image 图像域,图像提交按钮{

可用属性：class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片地址",height="高" width="宽" align对齐方式可用

}

button 按钮{

可用属性:name="button" value=“按钮显示名称”

}

submit 提交按钮{

可用属性:name="submit" value=“按钮显示名称”

}

reset 重置按钮{

可用属性:name="reset" value=“按钮显示名称”

}

2.下拉菜单和列表标签

<select>下拉菜单与列表标签属性：（注意，该标签成对出现）

name="设置下拉菜单和列表名称"

multiple 不需要设值，直接添加即可选择多个项目

size="列表可见数量"

value="返回服务器的值"

3.<option>下拉菜单和列表行标签属性：

selected 不需要设置，初始选择状态

value="返回服务器值"

4.<optgroup>菜单和列表分组标签属性值：

label="南方"

第4.项下拉菜单分组代码使用代码如下：

<selected>

<option>请选择城市</option>

<optgroup label="北方">

<option>北京</option>

<option>上海</option>

<option>山东</option>

</optgroup>

<optgroup label="南方">

<option>广东</option>

<option>深圳</option>

<option>珠海</option>

</optgroup>

</selected>

5.form表单属性

action 提交表单时向何处发送表单数据

method 设置表单以何种方式发送到指定页面{

get 在网址后面显示表单数据，post 表单提交数据，过程数据不可见

}

name="表单名称"

target 打开窗口方式{

_blank新窗口打开，_self原窗口打开

}

enctypt 发送表单前如何进行编码{

application/x-www-form-urlencoded默认

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

text/plain将文件设置为纯文本的形式

}    

今天学习课程共用了115分钟，对input标签(图像域和隐藏域)、select标签(下拉菜单和列表)、多行文本域<textarea>和对表单页面的调整以及对这几天学习的内容进行了总结,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!