<style>

html, body, .ui-content {
background-color: #333;
color: #ddd;
}

body > .ui-infobar {
display: none;
}

.ui-view-area > .ui-infobar {
display: block;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: #ddd;
}

.markdown-body h1,
.markdown-body h2 {
border-bottom-color: #ffffff69;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #fff;
}

.markdown-body img {
background-color: transparent;
}

.ui-toc-dropdown .nav>.active:focus>a, .ui-toc-dropdown .nav>.active:hover>a, .ui-toc-dropdown .nav>.active>a {
color: white;
border-left: 2px solid white;
}

.expand-toggle:hover,
.expand-toggle:focus,
.back-to-top:hover,
.back-to-top:focus,
.go-to-bottom:hover,
.go-to-bottom:focus {
color: white;
}

.ui-toc-dropdown {
background-color: #333;
}

.ui-toc-label.btn {
background-color: #191919;
color: white;
}

.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: white;
border-left: 1px solid white;
}

.markdown-body blockquote {
color: #bcbcbc;
}

.markdown-body table tr {
background-color: #5f5f5f;
}

.markdown-body table tr:nth-child(2n) {
background-color: #4f4f4f;
}

.markdown-body code,
.markdown-body tt {
color: #eee;
background-color: rgba(230, 230, 230, 0.36);
}

a,
.open-files-container li.selected a {
color: #5EB7E0;
}

</style>}
# Python + Flask 虛擬美國股票交易網站 Part4 （表單）
###### tags: `CS50` `Python` `Flask`

### 在vfinance 虛擬股票交易網站中總共需要四個表單，分別是
* 註冊表單 RegisterForm
* 登錄表單 LoginForm
* 查價表單 QuoteForm
* 交易表單 TradeForm

## vfinance/forms.py 建立表單

## 註冊表單

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, IntegerField, SelectField, TextAreaField, ValidationError,BooleanField, PasswordField, HiddenField, validators, FloatField
from wtforms.validators import DataRequired, Email, Length, Optional, URL, NumberRange
from vfinance.models import User

from wtforms.fields import html5 as h5fields
from wtforms.widgets import html5 as h5widgets



class RegisterForm(FlaskForm):
    username = StringField("Username", validators=[DataRequired(), Length(1,20)])
    password = PasswordField("Password", validators = [DataRequired(), Length(1, 128), validators.EqualTo("confirm", message='Passwords must match')])
    confirm = PasswordField("Repeat Password")
    submit = SubmitField("Register")

### 登入表單

class LoginForm(FlaskForm):
    username = StringField("Username", validators=[DataRequired(), Length(1, 20)])
    password = PasswordField("Password", validators=[DataRequired(), Length(1, 128)])
    remember = BooleanField("Remember me")
    submit = SubmitField("Log in")

### 查價表單

class QuoteForm(FlaskForm):
    symbol = StringField("Symbol", validators =[DataRequired()])
    submit = SubmitField("Submit")

### 交易表單

class TradeForm(FlaskForm):
    action = SelectField("Action",choices=[('Buy','Buy'),('Sell','Sell')])
    symbol = StringField("Symbol", validators =[DataRequired()])
    price = FloatField("Price", validators = [NumberRange(min = 0,message=' Should not be less than 0')])
    quantity = IntegerField("Quantity", widget=h5widgets.NumberInput(min=1))
    submit = SubmitField("Review Order")

### 到目前為止已經建立了所有需要的數據庫，模板文件和表單，之後就可以開始建立大部分的視圖函數。