Web前端第一季(HTML):十四:课时 38 : 309-文本域完成大段文本的输入+课时 39 : 310-表单的属性+课时 40 : 311-文件上传
生活随笔
收集整理的這篇文章主要介紹了
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-文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Canal】互联网背景下有哪些数据同步
- 下一篇： HTML前端代码分析(查看网站黑链的几种