Web前端第一季(HTML):十四:课时 38 : 309-文本域完成大段文本的输入+课时 39 : 310-表单的属性+课时 40 : 311-文件上传
目录
一.目的
1.想:学习前端知识
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
1.SIKI学院:我参考此视频实操
1.w3school官网:当做字典使用
1.菜鸟教程:当做字典使用
三.注意
四.操作:1:成功:课时 38 : 309-文本域完成大段文本的输入
1.运行结果:成功:
四.操作:2:成功:课时 39 : 310-表单的属性
1.运行结果:成功:
四.操作:3:成功:课时 40 : 311-文件上传
1.运行结果:成功:能实现文件上传,暂时不用考虑文件上传到什么位置
一.目的
1.想:学习前端知识
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
GitHub - xzy506670541/WebTest: SIKI学院的Web前端
1.SIKI学院:我参考此视频实操
登录 - SiKi学院 - 生命不息,学习不止!
- 我参考此视频实操
1.w3school官网:当做字典使用
w3school 在线教程
1.菜鸟教程:当做字典使用
菜鸟教程 - 学的不仅是技术,更是梦想!
三.注意
四.操作:1:成功:课时 38 : 309-文本域完成大段文本的输入
1.运行结果:成功:
<!DOCTYPE html>
<html>
<head><title>我是标题</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><!-- utf-8 gbk gb2012 -->
</head>
<body><!-- <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 -->
<!--<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。 -->
<!-- <input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
type="text":类型为文本
name="username":发给服务端时候,让服务端知道文本的名字是什么;
value="xzy":此文本默认值
maxlength="7":文本内容最长7个数量,中文也是不能超过7个。
placeholder="请输入你的用户名",和value="xzy"会冲突,俩个只能用一个,默认使用value-->
<form>
<table><!-- 向服务器传递数值:username=XXXXXXX password=xxxxxx sex=man hobby=1234 --> <tr><!-- <td>账号</td><td><input type="text" name="username" value="xzy" maxlength="7" placeholder="请输入你的用户名"/></td> --><td>账号</td><td><input type="text" name="username" maxlength="7" placeholder="请输入你的用户名" value="xzy"/></td></tr><tr><!-- <td>密码</td><td><input type="password" value="123" /></td> --><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr><tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr> <tr><td>性别</td> <td>男<input type="radio" name="sex" value="man" checked="true"/> 女<input type="radio" name="sex" value="woman"/> 不男不女<input type="radio" name="sex" value="manwoman"/> </td></tr><tr><td>是否是中国人</td> <td>是<input type="radio" name="isChinese" value="true" checked="true"/> 不是<input type="radio" name="isChinese" value="false"/> </td></tr> <tr><td>爱好 </td><td > 读书<input type="checkbox" name="hobby" value="1" checked > 游泳<input type="checkbox" name="hobby" value="2"> 篮球<input type="checkbox" name="hobby" value="3" ></td><tr><tr><td>生日</td><td><select size="3" multiple name="month"><!-- size="3":一次性显示3个月 --><!-- multiple按住ctrl后是可以多选 --><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7"selected>7月</option><!-- selected被选择 --><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option> </select><select name="day"><option value="1">1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option selected>8</option><option>9</option><option>10</option> <option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select></td><tr><tr><td colspan="2" align="center"><input type="button" value="我是普通按钮功能可以自定义"><input type="reset" name="reset" value="设置为默认"><input type="submit" name="register" value="注册"></td> </tr><tr><td colspan="2" align="center"> <input type="image" src="img/register.png"> </td></tr><!-- 图片点击默认是提交按钮的效果 --><input type="hidden" name="id" value="100" ><!-- 隐藏控件,也叫做隐藏域,给服务端发送消息 --><tr><td>交友宣言</td><td><textarea name="message" placeholder="可以说一下你的交友理由!" rows="10" cols="100"></textarea></td></tr></table></form></body>
</html>
四.操作:2:成功:课时 39 : 310-表单的属性
1.运行结果:成功:
<!DOCTYPE html>
<html>
<head><title>我是标题</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><!-- utf-8 gbk gb2012 -->
</head>
<body><!-- <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 -->
<!--<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。 -->
<!-- <input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
type="text":类型为文本
name="username":发给服务端时候,让服务端知道文本的名字是什么;
value="xzy":此文本默认值
maxlength="7":文本内容最长7个数量,中文也是不能超过7个。
placeholder="请输入你的用户名",和value="xzy"会冲突,俩个只能用一个,默认使用value--><!-- <form action="09自定义列表.html" method="get" name="registerform"> -->
<form action="09自定义列表.html" method="post" name="registerform"><!-- action URL 规定当提交表单时向何处发送表单数据。 -->
<!--采用POST方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与action属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。 --><table><!-- 向服务器传递数值:username=XXXXXXX password=xxxxxx sex=man hobby=1234 --> <tr><!-- <td>账号</td><td><input type="text" name="username" value="xzy" maxlength="7" placeholder="请输入你的用户名"/></td> --><td>账号</td><td><input type="text" name="username" maxlength="7" placeholder="请输入你的用户名" value="xzy"/></td></tr><tr><!-- <td>密码</td><td><input type="password" value="123" /></td> --><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr><tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr> <tr><td>性别</td> <td>男<input type="radio" name="sex" value="man" checked="true"/> 女<input type="radio" name="sex" value="woman"/> 不男不女<input type="radio" name="sex" value="manwoman"/> </td></tr><tr><td>是否是中国人</td> <td>是<input type="radio" name="isChinese" value="true" checked="true"/> 不是<input type="radio" name="isChinese" value="false"/> </td></tr> <tr><td>爱好 </td><td > 读书<input type="checkbox" name="hobby" value="1" checked > 游泳<input type="checkbox" name="hobby" value="2"> 篮球<input type="checkbox" name="hobby" value="3" ></td><tr><tr><td>生日</td><td><select size="3" multiple name="month"><!-- size="3":一次性显示3个月 --><!-- multiple按住ctrl后是可以多选 --><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7"selected>7月</option><!-- selected被选择 --><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option> </select><select name="day"><option value="1">1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option selected>8</option><option>9</option><option>10</option> <option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select></td><tr><tr><td colspan="2" align="center"><input type="button" value="我是普通按钮功能可以自定义"><input type="reset" name="reset" value="设置为默认"><input type="submit" name="register" value="注册"></td> </tr><tr><td colspan="2" align="center"> <input type="image" src="img/register.png"> </td></tr><!-- 图片点击默认是提交按钮的效果 --><input type="hidden" name="id" value="100" ><!-- 隐藏控件,也叫做隐藏域,给服务端发送消息 --><tr><td>交友宣言</td><td><textarea name="message" placeholder="可以说一下你的交友理由!" rows="10" cols="100"></textarea></td></tr></table></form></body>
</html>
四.操作:3:成功:课时 40 : 311-文件上传
1.运行结果:成功:能实现文件上传,暂时不用考虑文件上传到什么位置
<!DOCTYPE html>
<html>
<head><title>我是标题</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><!-- utf-8 gbk gb2012 -->
</head>
<body><!-- <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 -->
<!--<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。 -->
<!-- <input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
type="text":类型为文本
name="username":发给服务端时候,让服务端知道文本的名字是什么;
value="xzy":此文本默认值
maxlength="7":文本内容最长7个数量,中文也是不能超过7个。
placeholder="请输入你的用户名",和value="xzy"会冲突,俩个只能用一个,默认使用value--><!-- <form action="09自定义列表.html" method="get" name="registerform"> -->
<form action="09自定义列表.html" method="post" name="registerform" enctype="multipart/form-data"><!-- action URL 规定当提交表单时向何处发送表单数据。 -->
<!--采用POST方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与action属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。 --><table><!-- 向服务器传递数值:username=XXXXXXX password=xxxxxx sex=man hobby=1234 --> <tr><!-- <td>账号</td><td><input type="text" name="username" value="xzy" maxlength="7" placeholder="请输入你的用户名"/></td> --><td>账号</td><td><input type="text" name="username" maxlength="7" placeholder="请输入你的用户名" value="xzy"/></td></tr><tr><!-- <td>密码</td><td><input type="password" value="123" /></td> --><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr><tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr> <tr><td>性别</td> <td>男<input type="radio" name="sex" value="man" checked="true"/> 女<input type="radio" name="sex" value="woman"/> 不男不女<input type="radio" name="sex" value="manwoman"/> </td></tr><tr><td>是否是中国人</td> <td>是<input type="radio" name="isChinese" value="true" checked="true"/> 不是<input type="radio" name="isChinese" value="false"/> </td></tr> <tr><td>爱好 </td><td > 读书<input type="checkbox" name="hobby" value="1" checked > 游泳<input type="checkbox" name="hobby" value="2"> 篮球<input type="checkbox" name="hobby" value="3" ></td><tr><tr><td>生日</td><td><select size="3" multiple name="month"><!-- size="3":一次性显示3个月 --><!-- multiple按住ctrl后是可以多选 --><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7"selected>7月</option><!-- selected被选择 --><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option> </select><select name="day"><option value="1">1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option selected>8</option><option>9</option><option>10</option> <option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select></td><tr><tr><td colspan="2" align="center"><input type="button" value="我是普通按钮功能可以自定义"><input type="reset" name="reset" value="设置为默认"><input type="submit" name="register" value="注册"></td> </tr><tr><td colspan="2" align="center"> <input type="image" src="img/register.png"> </td></tr><!-- 图片点击默认是提交按钮的效果 --><input type="hidden" name="id" value="100" ><!-- 隐藏控件,也叫做隐藏域,给服务端发送消息 --><tr><td>交友宣言</td><td><textarea name="message" placeholder="可以说一下你的交友理由!" rows="10" cols="100"></textarea></td></tr><tr> <td>简历</td> <td><input type="file" name="resume" ></td> </tr></table></form></body>
</html>
Web前端第一季(HTML):十四:课时 38 : 309-文本域完成大段文本的输入+课时 39 : 310-表单的属性+课时 40 : 311-文件上传相关推荐
- Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- Web前端第一季(HTML):三:课时 7 : 106-设置文档类型和网页编码+课时 8 : 107-段落标签和标题标签+课时 9 : 108-标签的属性和段落的对齐属性
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.SIKI学院 1.Nodepad++官网 1.w3school官网 三.注意 四.操作 ...
- 生命html文档,Web前端第一季(HTML)
{getUnitName} {getLessonName} 敬请期待 免费 {getTaskName} 剩余观看时长:{watchLimitRemaining} 回放 {activityStartTi ...
- Java Web 文件上传下载
文章目录 1文件上传概述 1.1文件上传的作用 1.2文件上传对页面的要求 1.3 比对文件上传表单和普通文本表单的区别 1.4 对普通文本表单的测试 1.5 文件上传对Servlet的要求 2 co ...
- Javaweb学习笔记——(二十二)——————文件上传、下载、Javamail
文件上传概述 1.文件上传的作用 例如网络硬盘,就是用来上传下载文件的. 在网络浏览器中,时常需要上传照片 2.文件上传对页面的要求 上 ...
- CTFHub笔记之WEB文件上传:无验证、前端验证、文件头检查
小白一个,如有错误请指正! 一.无验证 我们这次来到了文件上传模块了,这是一个无验证的文件上传,那我们直接上传一个一句话木马即可. 代码: <?php@eval($_REQUEST[" ...
- 【web安全】——文件上传漏洞
作者名:白昼安全 主页面链接: 主页传送门 创作初心: 一切为了她 座右铭: 不要让时代的悲哀成为你的悲哀 专研方向: web安全,后渗透技术 每日emo:那种满的快要溢出来的喜欢,好像这辈子都不会有 ...
- 河南省网络安全高校战队联盟CTF训练营-web文件上传第一期
文件上传 个人介绍 姓名:飞羽 CTF菜菜一枚 例题来源 ctfhub:https://www.ctfhub.com pwnthebox:https://insider.pwnthebox.com c ...
- Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- Web基础配置篇(十四): Kafka单机、集群的安装配置及使用
Web基础配置篇(十四): Kafka单机.集群的安装配置及使用 一.概述 Apache Kafka是一个分布式发布 - 订阅消息系统和一个强大的队列,可以处理大量的数据,并使您能够将消息从一个端点传 ...
最新文章
- linux中EOF的用法梳理
- form表单提交数据编码方式和tomcat接受数据解码方式
- YII 增加登陆认证
- 02365计算机软件基础,自考02365《计算机软件基础(二)》习题解答.pdf
- canvas 在线画图
- 阿里巴巴在内蒙古旱区试水物联网灌溉技术,一年省出1.5个西湖
- 避坑:一次离奇性能故障的排查与反思
- 为什么找不到用户和计算机名,计算机管理里没有(本地用户和组)了为什么怎么恢复...
- An internal error occurred during: Retrieving archetypes:. GC overhead limit exceeded
- Eclipse中JSP生成的class文件去了哪里?(转)
- 操作系统原理(一)操作系统概述和操作系统用户界面
- 我的dota之路(下)
- RHEL7中设置ssh
- 如何将自己的电脑做成服务器
- 本地测试微信授权登录
- 缺失值的处理方法大总结
- 加盐密码哈希:如何正确使用 (密码加密的经典文章)
- Laravel 论坛系统之消息通知功能
- “地表最贵iPhone”到货,iPhone XS 系列手机等你来测!
- 当前不会命中断点还未为文档加载任何符号——问题探究