|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-3-9 11:17 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
1、output 元素
output 元素用来定义不同类型的输出，比如脚本的输出。
比较语义化的一个元素，当需要加载计算结果，又不想使用 JavaScript时，就可以用它。
代码：
- <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
- <input type="range" id="a" value="50">100
- +<input type="number" id="b" value="50">
- =<output name="x" for="a b" >100</output>
- </form>
小甲鱼老师课程通过 XAMPP 来演示结果。上面代码中通过 form 元素的oninput 属性来代替（犯懒了）。
效果是一样的，通过 output 的 name 属性绑定，来实现计算结果的呈现。
2、textarea 元素
textarea 元素是定义多行文本输入的控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
小甲鱼老师特意推荐了一下，建议大家将编译器的字体格式都设置为等宽字体。
代码：
- <textarea rows="3" cols="20">
- 鱼C工作室，让每个人都能自学会编程。
- </textarea>
可以通过 cols 和 rows 属性来规定 textarea 的尺寸。
（不过更好的办法是使用 CSS 的 height 和 width 属性。）
cols，规定文本区内的可见宽度。
rows，规定文本区内的可见行数。
宽度和行数的单位都是：
1个中文字符=2个英文字母（英文符号）。
上面代码中 rows 设置为 3，纵向显示 3 个字符数（3行）。
cols 设置为 20 ，横向显示 20 个字符。
通过 textarea 元素的 wrap 属性设置在提交表单时文本输入区内的换行模式。
在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
wrap 属性有 3 个值，hard/soft/off，这三个值都不会对页面渲染效果有影响。
hard，自动换行，并在 url 中显示换行符（%OD%OA）。
soft，自动换行，不在 url 中显示换行符。
off，不自动换行。
我们演示下 hard，需要启动XAMPP：
- <form action="#" method="get">
- <textarea rows="5" cols="30" wrap="hard">
- 左手一个小甲鱼，右手一把打火机，哪里不会点哪里，妈妈再也不用担心我的学习啦～
- </textarea>
- <br>
- <input type="submit">
- </form>
3、小综合-鱼C表单
最后小甲鱼老师带我们手把手综合复习一下，涉及课程017-022讲
表单在线演示：传送门
fieldset、select 元素参看：017
input 元素 type 属性参看：018、019、020、021、022
textarea 元素见本讲。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-2-8 08:25:23
置顶卡
千斤顶
显身卡
发表于 2019-2-8 08:45:06
发表于 2019-12-21 16:21:54