專題班第六堂網頁課

表單、剩餘的HTML元素、SEO語意

表單

可以讓使用者輸入資料

並回傳到遠端伺服器（server）

表單

語法：

<form>content</form>

表單元素的屬性

<form

>
	content
</form>
<form action=""

>
	content
</form>

表單元素的屬性

<form action="表單資料目的地"

>
	content
</form>

表單元素的屬性

<form action="表單資料目的地"
      method=""
>
	content
</form>

表單元素的屬性

<form action="表單資料目的地"
      method="get|post"
>
	content
</form>

非敏感、小資料

敏感、大資料

檔案上傳

表單元素的屬性

<form action="表單資料目的地"
      method="get|post"
      target="_self|_blank|_parent|_top"
>
	content
</form>

當前視窗

新增視窗

上一層視窗

頂層視窗

表單元素的屬性

<input>

文字輸入欄位

表單核取方塊

表單送出按鈕

<input>

<input>

<input>屬性

<input name="">

送出去的資料的名字

暑訓報名表單你的姓名

<input name="name">

<input>屬性

<input name="">

送出去的資料的名字

暑訓報名表單你的生日

<input name="birthday">

birthday="1999/09/21"

<input>屬性

<input name="birthday"
       value="2006/09/01">

Codepen連結

<input>屬性

<input disabled>

<input>屬性

<input placeholder="請輸入姓名">

<input>屬性中的type

<input type="text">
<input type="checkbox">
<input type="radio">

<input>屬性中的type

<input type="checkbox" checked>
<input type="radio" checked>

checked

<input>屬性中的type

<input type="submit">

<input>屬性中的type

<input type="submit"
       value="提交表單">
<input type="reset">

<input>屬性中的type

<input type="submit"
       value="提交表單">
<input type="reset"
       value="重設表單">

<input>屬性中的type

<input type="file">

<input>屬性中的type

<input type="file"
       accept="image/*|video/*|audio/*">

.jpg

.pdf

.doc

<input>屬性中的type

<input type="file"
       accept="image/*|video/*|audio/*"
       multiple>

多選檔案上傳

<input type="button" value="Click me">

<textarea>

輸入多行文字的輸入框

<textarea>

name

rows

cols

maxlength

minlength

placeholder

disabled

readonly

required

<textarea>

name

rows

cols

maxlength

minlength

placeholder

disabled

readonly

required

名字

高度是幾行

寬度是幾行

文字長度上限

文字長度下限

提示訊息

禁用

唯讀不可編輯

必填

<textarea>

<textarea name="mytext"
          rows="6"
          cols="40"
          required>
我是...
多行....
輸入框....
</textarea>

下拉式選單

<select>

<option>

下拉式選單

<select>
    <option>請選擇你最愛的寵物</option>
    <option>Dog</option>
    <option>Cat</option>
    <option>Hamster</option>
    <option>Parrot</option>
    <option>Spider</option>
    <option>Goldfish</option>
</select>

<select>屬性

name

名字

disabled

禁用

required

必填

<option>屬性

<select name="pets">
    <option value="">請選擇你最愛的寵物</option>
    <option value="dog">Dog</option>
    <option value="cat" selected>Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider" disabled>Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

多選？

<select name="pets" multiple>
    <option value="">請選擇你最愛的寵物</option>
    <option value="dog">Dog</option>
    <option value="cat" selected>Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider" disabled>Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

加上size

<select name="pets" multiple size="6">
    <option value="">請選擇你最愛的寵物</option>
    <option value="dog">Dog</option>
    <option value="cat" selected>Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider" disabled>Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

把選項分區

<select name="catordog">
  <optgroup label="Cats">
    <option>Tiger</option>
    <option>Leopard</option>
    <option>Lynx</option>
  </optgroup>
  <optgroup label="Dogs">
    <option>Grey Wolf</option>
    <option>Red Fox</option>
    <option>Fennec</option>
  </optgroup>
</select>

按鈕

<button>submit</button>

表單欄位標題

<label>Do you like cheese?</label>
<input type="checkbox">
<label>Do you like peas?</label>
<input type="checkbox">

可以幹嘛？

增加表單元件的可點擊範圍

<label for="emailadd">Email address: </label>
<input type="email" name="emailadd" id="emailadd">

可以幹嘛？

增加表單元件的可點擊範圍

<label>
	Email address:
  	<input type="email">
</label>

表單分組

表單分組

<form>
  <fieldset>
    <legend>Personal details</legend>
    <label>Your name:</label> <input name="yourname">
    <label>Your age:</label> <input type="number" name="yourage">
  </fieldset>

  <fieldset>
    <legend>Your address</legend>
    <label>Street:</label> <input name="street">
    <label>Zip code / post code:</label> <input name="postcode">
  </fieldset>
</form>

<div>容器

當作容器（ｃｏｎｔａｉｎｅｒ）

整理HTML成不同區塊

方便給CSS做樣式排版

給JavaScript做互動操作

<div class="shadowbox">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>

HTML

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

CSS

<span>容器

跟div差別就只在

div是整行，span是行內

請看演示...

強調

<p>寒訓要報要快，<strong>先報會先上</strong></p>
<p>優秀的課程、認識同屆，<em>還有神秘活動</em></p>
<p>還便宜，<mark>七天只要2500元！</mark></p>

<hr>水平分隔線

<hr>

<iframe>內嵌框架

Youtube

Facebook

<pre>

用來保存原始文字內容的格式

空白、換行會被保留下來

<code>程式碼

<p>Regular text. <code>This is code.</code> Regular text.</p>

<pre>跟<code>

<pre>
<code>
p {
  color: #333;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}
</code>
</pre>

一些新東西

<video>

<audio>

要用再去google

SEO

SEO

SEO

section

article

nav

header

footer

main

aside

SEO

section

article

nav

header

footer

main

aside

有自己明顯語意的區塊

內容本身是獨立且是獨立且完整的區塊

導航連結區塊

標頭區塊

頁尾區塊

頁面主要內容區塊

跟主要內容無關區塊

<datalist>

Codepen範例

<datalist>

<label>請問你使用什麼瀏覽器:
<input list="browsers" name="myBrowser"></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

<picture>

<picture>
  <source srcset="logo-wide.png" media="(min-width: 1200px)">
  <source srcset="logo-mid.png" media="(min-width: 600px)">
  <img src="logo-narrow.png">
</picture>

響應式網頁常用

在不同裝置使用不同圖片

<picture>

<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png">
</picture>

HTML 表單 以及剩下的 HTML

By sbincer32

Made with Slides.com

HTML 表單 以及剩下的 HTML

  • 94

More from sbincer32