---
title: Survey Form
tag: sirla
---
# Creat a Survey Form by yourself throw the HTML5, CSS & Javascript
---
> [TOC]
---
# Survey Form
## **[組員們的成品](https://github.com/SIRLA-FJULIS/Survey-Form)**
## **[示範網頁](https://codepen.io/freeCodeCamp/full/VPaoNP)**
---
</br>
# 製作表格所需的標籤
## Form
`<form>` form是個用於製作表格框架的標籤。
`<form methon="">` methon是指傳送資料的方式，其數值有有`GET``POST`
`GET`是用URL的方式來傳輸資料，較為不安全，但初學者來說夠用了。
`POST`是以html的方式來傳送資料，較為安全，但需要設定一些數值才可以使用。
`<form action="">` action是指會把收集的資料傳送到什麼地方，例如︰
```htmlmixed=
<form action="www.example.com/example.htm" methon="POST">
```
上方的程式，就透過URL是把資料傳送到"www.example.com/example.htm"。
除了用絕對位置，亦可以用相對位置，但記得僅限於站內的位置，如果要連結到站外的位置，請務必使用絕對URL。
```
絕對URL - 指向其他網站（例如"www.example.com/example.htm"）
相對URL - 指向站內的文件（比如"example.htm"）
```
</br>
## Label
`<label>` 標籤的標籤，`<input>`的好基友。很多時`<label>`後方都會粘著一個`<input>`。
`<lable for="">` for是與別的標籤內的屬性id進行綁定的，例如︰
```htmlmixed=
<label for="life">Doubt about your life?</label>
<input type="text" name="doubt" id="life">
```
這是一種**顯式聯系**的方式，你可以看到`for`綁定了`"life"`。
接下來`<input>`內的`id`也同樣是用`"life"`，因此上方的`<label>`就會與`<input>`綁定。
其實不想用for的話還有另一種做法︰
```htmlmixed=
<label>Is that already ruined?<input type="text" name="mylife"></label>
```
這是一種**隱式聯系**的方式，你並不會看到看到`for`，但`<input>`被`<label>`包起來了，這樣在背後也是有綁定起來。
</br>
## Input
`<input>` input的功能是用來收集使用者所輸入的資料。
### type=""
`<input>`隨著其內部屬性`type`的值不一樣，其顯示方式也會不一樣。
這次我們會用到的input:
```htmlmixed=
<input type="text"> <!--Textbox用於輸入「文字」-->
<input type="email"> <!--Textbox用於輸入「文字」，且檢查是否符合email格式-->
<input type="number"> <!--Textbox用於輸入「數字」，可配合 min="" max=""
控制數字範圍-->
<input type="radio"> <!--Radio button-->
<input type="checkbox"> <!--Checkbox-->
```
Radio button跟Checkbox能搭配`<ul><li>`使用，製作出點選用的選項。
### Other
`input`有很多屬性可以設定，以下是部份這次會用到的屬性︰
```htmlmixed=
<input autofocus> <!--載入頁面時，自動把浮標移到此input-->
<input placeholder=""> <!--該欄位的提示文字-->
<input required> <!--限制使用者"必須"在該欄位輸入-->
```
</br>
## Select
`<select>` select即是dropdown(下拉式選單)。用法如同`<ul><li>` 一樣，`<select>`下方要配搭`<option>`來使用。
例子︰
```htmlmixed=
<select>
<option disable value="play">Play</option>
<option value="work">Work</option>
<option value="eat">Eat</option>
<option value="sleep">Lie in the grave</option>
</select>
```
`<option value="">` value代表著真正被回傳去的值。
</br>
## Textarea
`<textarea>`能輸入一行文字的叫Textbox，能輸入多行文字的叫Textarea。
</br>
## Button
`<button>` 按鈕。
`<button type="submit">` 具「回傳表格內的資料」功能的按鈕。
</br>
</br>
---
# 實作
</br>
## 檔案準備
我們會用到3個檔案
```
index.html
index.css
index.js
```
## HTML Structure
讓我們先把運用剛剛學過的語法，把Survey Form大概架構打出來。
```htmlmixed=
<body>
<form>
<label>Name</label>
<input> <!--text-->
<label>Email</label>
<input> <!--email-->
<label>Age</label>
<input> <!--number-->
<label>Role</label>
<select> <!--dropdown-->
<option></option>
</select>
<label>Recommend to friend</label>
<ul>
<li><label><input> <!--radio button--> </label></li>
</ul>
<label>Like most FCC</label>
<select> <!--dropdown-->
<option></option>
</select>
<label>Improve</label>
<ul>
<li><label><input> <!--checkbox--> </label></li>
</ul>
<label>Suggestion</label>
<textarea></textarea>
<button></button> <!--submit-->
</form>
</body>
```
</br>
---
## CSS
**[註釋版本](https://hackmd.io/s/SypUf8aA7)**
### 引入google的css格式
```css=
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
```
### html及body的CSS
```css=
html,
body {
background-color: #a9d7d1;
text-align: center;
font-family: 'Raleway', Helvetica, sans-serif;
min-width: 320px;
}
```
### Header的CSS
Header這個元素包括了`<h1>`~`<h6>`。
```css=
header {
font-size: 2em;
font-weight: bold;
margin: 20px;
}
```
### form外面的CSS
```css=
#form-outer {
background-color: rgb(250, 250, 250);
margin: 0 auto;
border-radius: 4px;
width: 75%;
max-width: 900px;
padding: 10px;
padding-top: 20px;
}
```
### label的CSS
注意︰HTML的是`<label>`，但這是`labels`最後有加s。
```css=
.labels {
display: inline-block;
text-align: right;
width: 40%;
padding: 5px;
vertical-align: top;
margin-top: 10px;
}
```
### rightTab的CSS
```css=
.rightTab {
display: inline-block;
text-align: left;
width: 48%;
vertical-align: middle;
}
```
### input的CSS
```css=
.input-field {
height: 20px;
width: 280px;
padding: 5px;
margin: 10px;
border: 1px solid #c0c0c0;
border-radius: 2px;
}
```
### userAge的CSS
```css=
#userAge {
width: 40px;
}
```
### userRatings的CSS
```css=
.userRatings,
input[type="checkbox"] {
float: left;
margin-right: 5px;
}
```
### Submit的CSS
```css=
#submit {
background-color: #59ace0;
border-radius: 4px;
color: white;
font-size: 1em;
height: 40px;
width: 96px;
margin: 10px;
border: 0px solid;
}
```
### Dropdown的CSS
```css=
.dropdown {
height: 35px;
width: 140px;
padding: 5px;
margin: 10px;
margin-top: 15px;
border: 1px solid #c0c0c0;
border-radius: 2px;
}
```
### radio button及checkbox的CSS
```css=
.radio, .checkbox {
position: relative;
left: -43px;
margin-left: 10px;
display: block;
padding-bottom: 10px;
}
```
### Media query
```css=
@media screen and (max-width: 768px) {
.input-field {
width: 80%;
}
select {
width: 90%;
}
}
@media screen and (max-width: 600px) {
.labels {
width: 100%;
text-align: left;
}
.rightTab {
width: 80%;
float: left;
}
.input-field {
width: 100%;
}
select {
width: 100%;
}
}
```
---
## HTML (with `<div>`)
CSS終於打完了，接下來可以把CSS都引入網頁的介面了
把`<div>`都打進去吧。
```htmlmixed=
<head>
<meta charset="utf-8">
<title>SIRLA-FJULIS Survey Form</title>
<link rel="stylesheet" href="css/IndexStyle.css">
<script src='js/IndexJS.js'></script>
</head>
<body>
<h1 id="title">Survey Form</h1>
<div id="form-outer">
<p id="description">
Let us know how we can improve freeCodeCamp
</p>
<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">
<div class="rowTab">
<div class="lables">
<label id="name-lable" for="name">* Name: </label>
</div>
<div class="rightTab">
<input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
</div>
</div>
<div class="rowTab">
<div class="lables">
<label id="email-label" for="email">* Email</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email">
</div>
</div>
<div class="rowTab">
<div class="labels">
<label id="number-label" for="age">* Age</label>
</div>
<div class="rightTab">
<input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age">
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="currentPos">Which option best describes your current role?</label>
</div>
<div class="rightTab">
<select id="dropdown" name="currentPos" class="dropdown">
<option disabled value>Select an option</option>
<option value="student">Student</option>
<option value="job">Full Tiome Job</option>
<option value="learner">Full Time Learner</option>
<option value="]referNo">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="userRating">* How likely is that you would recommend freeCodeCamp to a friend</label>
</div>
<div class="rightTab">
<ul style="list-style: none;">
<li class="radio"><label>Definitely<input name="radio-buttons" value="1" type="radio" class="userRatings"></label></li>
<li class="radio"><label>Maybe<input name="radio-buttons" value="2" type="radio" class="userRatings"></label></li>
<li class="radio"><label>Not sure<input name="radio-buttons" value="3" type="radio" class="userRatings"></label></li>
</ul>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="most-like">What do you like most in FCC: </label>
</div>
<div class="rightTab">
<select id="most-like" name="mostLike" class="dropdown">
<option disabled selected value>Select an option</option>
<option value="challengs">Challenges</option>
<option value="porjects">Projects</option>
<option value="community">Community</option>
<option value="openSource">Open Source</option>
</select>
</div>
</div>
<div class="rowTab">
<div clasbrs="labels">
<label for="preferences">Things that should be improved in the future<br>(Check all that apply): </label>
</div>
<div class="rightTab">
<ul id="preferences" style="list-style: none;">
<li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Front-end Projects</label></li>
<li class="checkbox"><label><input name="prefer" value="2" type="checkbox" class="userRatings">Back-end Projects</label></li>
<li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Data Visualization</label></li>
<li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Challenges</label></li>
<li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">Open Source Community</label></li>
<li class="checkbox"><label><input name="prefer" value="6" type="checkbox" class="userRatings">Gitter help rooms</label></li>
<li class="checkbox"><label><input name="prefer" value="7" type="checkbox" class="userRatings">Videos</label></li>
<li class="checkbox"><label><input name="prefer" value="8" type="checkbox" class="userRatings">City Meetups</label></li>
<li class="checkbox"><label><input name="prefer" value="9" type="checkbox" class="userRatings">Wiki</label></li>
<li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Forum</label></li>
<li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Additional Courese</label></li>
</ul>
</div>
</div>
<button id="submit" type="submit">Submit</button>
</form>
</div>
</body>
```
### rowTab
打著打著，你會發現`<div class="rowTab"`打了無數次，但都沒有在CSS裡出現，那麼它到底是用來幹嘛的呢?
```
沒有在CSS的話，應該是沒有什麼特別用途才對，但為什麼會一直出現？
重複這麼多次好像也沒什麼用吧，為什麼不乾脆把用一個`rowTab`把所有東西包起來？
```
`rowtab`其實比你想像中重要多了，他唯一的用途就是——排版。
每一個`rowTab`代表都著各自不同的區域方塊，正正是這些區域方塊，才不會讓各個`<label>`跟`<input>`跑位。
以下是的圖片說明了各個標籤所包括著的範圍︰
:::info
藍線 = `rowTab`
黑線 = `<label>`
紅線 = 各個輸入欄`<input>`、`<select>`、`<ul>`、`<textarea>`
:::
<img src="https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/3/b/3ba3797f67353935f800bfe8970b933f9f59b95c.jpeg">
# 補充
## alert
打開網頁時，頂端會跳出成功的提示
```htmlmixed=
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Submit Success!
</div>
```
再加上css
```css=
/* alert */
.alert {
padding: 20px;
position: fixed;
top: 5px;
left: 2%;
width: 96%;
background-color: green;
opacity: 0.6;
color: white;
margin-bottom: 15px;
}
/* Close button design */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* While the cursor stop at the close button, change the colour */
.closebtn:hover {
color: black;
}
```
## 更換頁面
使用`<input>`將`<type>`改成`<button>`用`<herf>`後連結到想更換的網頁。寫法如下：
```htmlmixed=
<form>
<input id="submit" type="button" value="Previous" onclick="window.history.back().href='index.html';"/>
<input id="submit" type="button" value="Next" onclick="document.location.href='index3.html';"/>
</form>
```
若想保留前面的資料須使用```<history.back().>```在回到上一頁時能保留使用者所填寫的資料。
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet