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

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

标签：

Html5

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

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

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

课程内容：

今天学习的内容包括：

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>

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

2.<select>标签属性

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

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

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

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

3.<option>标签属性

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

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

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

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

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

</optgroup>

多行文本域<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>下拉菜单与列表标签属性：（注意，该标签成对出现）