为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第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>

<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" ,这样就如图所示了   


https://img1.sycdn.imooc.com/62f482c30001483408910614.jpg      


<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

https://img4.sycdn.imooc.com/62f4839b0001438011670596.jpg       


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将文件设置为纯文本的形式

}    


https://img2.sycdn.imooc.com/62f48ff20001260905610275.jpg


https://img1.sycdn.imooc.com/62f48ff30001923009100582.jpg


https://img1.sycdn.imooc.com/62f48ff40001100b10400537.jpg


https://img2.sycdn.imooc.com/62f48ff4000171c710210617.jpg


https://img4.sycdn.imooc.com/62f48ff500013c0608720570.jpg



https://img3.sycdn.imooc.com/62f48ff60001438011670596.jpg


https://img3.sycdn.imooc.com/62f48ff60001c83f11670607.jpg


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

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
42

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消