2021-05-10

【Rails】バリデーション

プログラミング

f:id:kina_kq:20210510081539j:plain

バリデーションとは、

データベースに保存する前に保存する内容を検証する機能です。

バリデーションを定義することによって、フォームの入力必須の欄が入力されていなかったときに、フォームの送信を出来ないようにすることが出来ます。

バリデーションのトリガ

create

create!

save

save!

update

update!

検証データが保存されない場合

saveとupdateは、falseが、

createは、オブジェクト自身を返します。

メソッド名の最後に！をつけると、

保存されなかった場合には例外処理を返します。

バリデーションのスキップ

バリデーションのスキップは、バリデーションを行わずスキップします。

- decrement!
- decrement_counter
- increment!
- increment_counter
- toggle!
- touch
- update_all
- update_attribute
- update_column
- update_columns
- update_counters

しかし、saveにvalidate: falseを引数として与えると、saveのバリデーションをスキップできてしまうようなので注意が必要です。

valid? とinvalid?

valid?メソッドを使って、バリデーションを手動でトリガすることもできます。

オブジェクトにエラーが無いときにはtrueが返され、そうでなければfalseが返されます。

バリデーションヘルパー

バリデーションヘルパーは共通のバリデーションルールを提供します。

バリデーションが失敗すると、オブジェクトのerrorsコレクションにエラーメッセージが追加され、そのメッセージは、バリデーションが行われる属性に関連付けられます。

❏ :onオプション

どのヘルパーでも使用できます。

バリデーション実行のタイミングを設定することができます。

:onオプションは:createまたは:updateのいずれかの値を取ります。

❏ :messageオプション

どのヘルパーでも使用できます。

バリデーション失敗時にerrorsコレクションに追加するメッセージを指定することができます。このオプションが無いときは、デフォルトのメッセージが表示されます。

❏ acceptance

フォームが送信されたときに、ユーザーインターフェイス上のチェックボックスがオンになっているかどうかを検証するメソッドです。

サービス利用条項への同意が必要は場合によく使われます。

❏ confirmation

このヘルパーは、２つのテキストフィールドで受け取る内容が完全に一致する場合に使われます。

メールアドレスやパスワードが完全に一致するかの確認フィールドで使われます。

属性の名前は、確認したい属性名に「_confirmation」を追加します。

❏ length

このヘルパーは、属性の値の長さを検証します。

class Person < ApplicationRecord
  validates :name, length: { minimum: 2 }
  validates :bio, length: { maximum: 500 }
  validates :password, length: { in: 6..20 }
  validates :registration_number, length: { is: 6 }
end

値の大小から文字数の制限まで指定することができます。

❏ numericality

このヘルパーは、属性に数字のみが使われているかを検証します。

デフォルトでは整数または浮動小数点にマッチします。

整数のみにマッチさせたい場合、:only_integerをtrueにします。

❏ presence

このヘルパーは指定された属性が空でないかを検証します。

内部ではblank?メソッドを使っています。

class Person < ApplicationRecord
  validates :name, :login, :email, presence: true
end

参考

Active Record バリデーション - Railsガイド

【Rails】Railsのバリデーションの使い方をマスターしよう！ | Pikawaka - ピカ1わかりやすいプログラミング用語サイト

2021-05-09

アプリケーションの弱点をついた攻撃手法と対策 Part2

ITパスポート

f:id:kina_kq:20210509180047j:plain

前回の記事で、

✅ 辞書攻撃

✅ 総当たり攻撃

✅ パスワードリスト攻撃

✅ クロスサイトスクリプティング（XSS）

✅ SQLインジェクション

について調べました。

本日は、

✅ ドライブバイダウンロード

✅ DNSキャッシュポイズニング

✅ DoS（Denial of Service：サービス妨害）攻撃

✅ DDoS攻撃（Distributed Dos：分散型DoS攻撃）

✅ 水飲み場型攻撃

✅ やり取り型攻撃

✅ ゼロディ攻撃

について調べて行こうと思います！👀✨

ドライブバイダウンロード

ドライブバイダウンロードとは、

Webサイトに不正なソフトウェアを隠しておき、サイトの閲覧者がアクセスしただけでそれらをダウンロードさせ、感染させる攻撃のことです。

ユーザーの知らぬ間に、ダウンロードが実行されるため、感染していることに気づきにくいことが特徴です。

対策としては、

ウイルス対策ソフトを導入し、定義ファイルやOSを最新の状態に保つ必要があります。

DNSキャッシュポイズニング

DNSサーバーには、

IPアドレスとドメイン名の対応表のコピーを持つキャッシュサーバーがあります。

攻撃者がキャッシュサーバーの中身を偽情報に置き換えると（＝汚染されると）、悪意のあるサーバーに誘導され、そのサーバを使用したユーザーの機密情報を抜き出す攻撃です。

本来意図しない金融機関や商取引に似せた偽物のサイトに誘導され、ユーザー名やパスワードの情報が盗まれるといった出来事が発生しています。

対策としては

通信ポート番号をランダム化するソースポートランダマイゼーション が有効だとされています。

www.weblio.jp

DoS（Denial of Service：サービス妨害）攻撃

DoS攻撃とは、

直訳すると、「サービス拒否攻撃」です。

これは、大量の通信を発生させてサーバーをダウンさせ、サービスを妨害する攻撃です。

対策は、

ネットワークの監視装置で通信量などを監視し、不正な通信を遮断します。

DDoS攻撃（Distributed Dos：分散型DoS攻撃）

DDoS攻撃とは、

直訳すると、「分散型サービス拒否攻撃」という意味になります。

複数の端末からサーバーに一斉に通信を発生させ、ダウンさせてサービスを妨害する攻撃です。

この攻撃の厄介な所は、

不正に則った複数のコンピュータのIPを利用して攻撃が行われるので、

・攻撃元が次々と変わるため特定のIPをブロックすることが非常に難しい

・第三者のIPを使っているため、攻撃者の特定が難しい

といったことがとても厄介な点になります。

対策としては、

DoS攻撃と同様、ネットワークの監視装置で通信量などを監視し、不正な通信は遮断していく必要があります。

水飲み場型攻撃

f:id:kina_kq:20210509194315j:plain

水飲み場型攻撃とは、

ターゲットが訪れそうなWebサイトを改ざんし、ドライブバイダウンロード攻撃などを利用してマルウェアに感染させようとする標的型攻撃です。

❏ 水飲み場攻撃の名前の由来

水飲み場型攻撃は、英語ではwatering hole attackといい、野生動物などが水を飲みにやってくる水飲み場をさします。「たまり場型攻撃」と訳されることもあります。

Water hole🐎とは、

攻撃者を肉食動物、攻撃対象となる企業や組織のユーザーを草食動物に見立て、草食動物が集まる水飲み場のそばで、肉食動物が獲物を待ち伏せする様子になぞらえ、こう呼ばれるようになったといわれています。

対策は、

ウイルス対策ソフトを導入し、定義ファイルやOSを最新に保つことです。

侵入されないための対策はもちろんのこと、侵入された場合でも大切な情報を持ち出されないよう対策を取っておく必要があります。

やり取り型攻撃

やり取り型攻撃とは、

標的になった組織に対して、取引先や社内関係者になりすましてやりとりし、ウイルスを送りつけて機密情報を盗む攻撃です。

対策は添付ファイルの確認のときに社内のネットワークに接続されたコンピュータで作業を行わないことです。通常のネットワークとは隔離された試験環境を準備しておくことが大切です。

ゼロディ攻撃

ゼロディ攻撃とは、

開発者による修正プログラムが提供される日より前にその脆弱性を突く攻撃のことです。

対策を取られる日を１日目（ワンディ）と考え、それ以前に開始された攻撃という意味でゼロディ攻撃と呼ばれています。

ゼロディ攻撃の実例として、

2015年に「Adobe Flash Player」の脆弱性を突き、ゼロディ攻撃が起きた事例があります。

Flashコンテンツを読み込むと、その他のソフトウェアも強制的にダウンロードさせられるという被害が報告されました。

対策としては、常に最新のセキュリティ環境を保持するため、自動更新の設定を行ったり、こまめな確認が大切になってきます。

参考

脆弱性を悪用する「ドライブバイダウンロード」の仕組み・検知・対策

DNSサーバーへの「キャッシュポイズニング攻撃」対策について | 法人向けOCN

ソースポートランダマイゼーションとは何？ Weblio辞書

DoS攻撃・DDoS攻撃の意味と対策方法をわかりやすく解説 | セキュリティ対策 | CyberSecurityTIMES

水飲み場型攻撃とは？被害を最小化するために知るべき攻撃手順と対策

やり取り型メール攻撃とは？方法や注意点、効果的な対策について徹底解説

ゼロデイ攻撃とはなにか？サイバー攻撃の特徴と対策方法 | DAiKO＋PLUS（プラス）

2021-05-08

アプリケーションの弱点をついた攻撃手法と対策 Part1

ITパスポート

f:id:kina_kq:20210508080454p:plain

攻撃者はありとあらゆる手法を使って、攻撃を仕掛けてきます。

今日はそれらの攻撃の種類を飽きるまでまとめてみたいと思います。

辞書攻撃（Dictionary Attack）

辞書攻撃とは、

辞書にのっている単語を次々と入力してパスワードの割り出しや暗号の解読に使われる方法のことです。

対策としては、

・人名や意味のあるパスワードを用いないこと

・記号や数字をランダムに組み合わせることが大事です。

個人的に、ワンパスワードを使ってパスワード管理することをおすすめします。

総当り（ブルーフォース）攻撃

総当り攻撃とは、

英数字の組み合わせを一つずつ入力し不正アクセスを試みる攻撃です。

ブルーフォースの意味は、日本語で「強引な」とは「力ずく」という意味にあたります。

「なんだそれは、面倒くさいではないか！」という感じですが、

多くの場合プログラムされたコンピュータが行っているみたいです。

独立行政法人情報勝利推進機構が2008年に行った試験によると、

f:id:kina_kq:20210508081954p:plain

なんと英字4文字の場合、3秒で解読されるみたいです。

恐ろしやーといった感じです。

このデータはなかなか古いので、現在のパソコンだともっと速度速そうですね、、。

ちなみにこの試験で使用したパソコンのスペックは、Intel Core 2 Duo T7200 2.00GHz、メモリ：3GB　だったそうです。

これらの攻撃から守る具体的な対策は、

・8桁以上のパスワードを設定する

・ログインロックを設定する

・2要素認証を設定する

があります。

ログインロックとは、

複数回パスワードを間違えたら数分間アカウントを停止するなどの設定のことです。

こうすることで、解読するのにさらに膨大な時間がかかることになるので、総当たり攻撃の対策として効果的であるといえます。

２要素認証とは、

パスワードだけでログインするのではなく、あらかじめ登録していた「電話番号」や「メールアドレス」に認証コードが送られそれを認証して初めてログイン出来るというものになります。手間がかかっているので、これも対策として有効だといえると思います。

パスワードリスト攻撃

パスワードリスト攻撃とは、

攻撃者が事前に入手したIDとパスワードのリストを使って不正アクセスを試みる攻撃です。複数のサイトで同じIDやパスワードを使いまわしている人は要注意です。どこかのタイミングでパスワードが漏れてしまったら大変なことになってしまいます。

対策としては、IDやパスワードを使いまわさないことです。

パスワード管理アプリを使ってパスワードをきちんと管理しましょう。

クロスサイトスクリプティング（XSS）

クロスサイトスクリプティング（XSS）とは、

Webアプリケーションの画面表示処理の脆弱性をついた攻撃です。

攻撃者は、入力フォームにスクリプト付のリンクを含む内容を入力し、Webアプリケーションに罠を仕掛けます。訪問してきた人がリンクをクリックすることによって、別のWebサイト（クロスサイト）に遷移し入力した個人情報を盗み出すといった攻撃手法です。

対策としては、開発時に入力値を制限したりして、制限を予めかけておくことが大切です。

SQLインジェクション

SQLインジェクションとは、

Webアプリケーションのデータベースの処理の脆弱性をついた攻撃です。

入力画面でデータベースを操作するSQLコマンドを入力することで、データベースの内部の情報を不正に操作します。

対策として、これも同様、開発の段階で、SQLのエスケープ処理、多層バリデーション、バインドメカニズムの実装、そしてログ管理などを行う必要があります。

参考

辞書攻撃（Dictionary Attack） | セコムトラストシステムズのBCP（事業継続計画）用語辞典

ブルートフォースアタック（総当たり攻撃）とは？そのやり方・実際にかかる時間・対策方法は？

クロスサイトスクリプティング（XSS）のセキュリティ対策とは？ | セキュリティ対策 | CyberSecurityTIMES

SQLインジェクションを防ぐ対策とは｜わかりやすく仕組みを解説｜セキュリティコラム｜株式会社網屋

2021-05-07

Rails: ActiveRecord::Baseメソッドについて

プログラミング

f:id:kina_kq:20210507080428j:plain

昨日ふとActiveRecord::Baseってなんだろうと思ったので、

今日はActiveRecord::Baseの役割を調べつつまとめていきたいと思います。

そもそもActiveRecordとは

ActiveRecordとは、

MVCでいうところのM、モデルに相当するものです。

ActiveRecordによりデータベースに恒久的に保存される必要のあるビジネスオブジェクトの作成と利用を円滑に行えるようにしています。

また、Ruby on Railsで採用されているOR Mapperとは何かというと、

オブジェクト思考プログラミング言語におけるオブジェクトとリレーショナルデータベース（RDB）の間でデータ形式の相互変換を行っているものにあたります。

モデルとテーブルを継ぎ合わせることで、Railsからテーブルのレコードにアクセスできるようにする役割があります。

Railsにはデフォルトで搭載されており、

利用する際にはActiveRecord::Baseというクラスを利用して使用します。

ActiveRecord::Baseとは

ActiveRecord::Baseとは、

「テーブルにアクセスして情報を取得するためのメソッド」にあたります。

モデルクラスはActiveRecord::Baseというクラスを継承しており、モデルクラスはテーブルにアクセスし情報を取得することが可能になります。

参考

Rails: ActiveRecord::Baseメソッドのまとめ - Qiita

O/Rマッピング（O/Rマッパー）とは - IT用語辞典 e-Words

Active Record の基礎 - Railsガイド

2021-05-06

論理設計と正規化

プログラミング

f:id:kina_kq:20210506081026j:plain

論理設計の4ステップ

エンティティの抽出

エンティティの定義

正規化

ER図の作成

エンティティの抽出・定義

エンティティとは、日本語で「実体」という意味にあたります。

具体的には、物理的実体を伴うものだと顧客・社員・店舗といったものや、

概念としてしか存在しない注文・予約などが挙げられます。

RDBにおいては、テーブルの名前になるものにあたります。

エンティティの抽出

エンティティの抽出とは、実現したいシステムで、どんなエンティティを管理する必要があるか洗い出すプロセスのことをいいます。

（例）本の予約管理システム

→書籍・予約・予約者などのエンティティ

エンティティの定義

エンティティの定義とは、各エンティティがどのような属性（データ）を保持するかを決めるプロセスのことをいいます。

各テーブルがどんなカラムを持つのか定義します。

テーブルとは

テーブルとは、共通点を持ったレコードの集合のことをいいます。

テーブル名はすべて複数形/ 複数名詞で表します。

テーブルの構成要素

行と列

キー

制約

❏ 行と列

「行（レコード）」と「列（カラム）」と呼びます。

❏ キー

キーとは、ある特定のデータを引き出すための鍵となる列のことです。

表にはなくてもいいですが、テーブルにはなくてはならないものです。

主キーと外部キーがあります。

主キー（プライマリーキー）：その値をしていすれば必ず一行のレコードを特定できるような列

外部キー：２つのテーブル間の列同士の関連性を設定するもの

❏ 制約

参照整合性制約のように、テーブルには制約をつけることが出来ます。

他の代表的な制約としてNOT NULL制約があります。

NOT　NULL制約とは、

→NULLを禁止する制約のことで、

NULLとは「フィールドにデータが入っていない状態のこと」を指します。

正規化

正規化とは、システムでの利用がスムーズに行えるようにエンティティを整理するプロセスのことをいいます。

リレーショナルデータベースにおけるエンティティの整理は、正規化に整えることを指しています。

正規形とは

→データベースにおいて保持するデータの重複が排除されたデータ形式のことです。

データの重複（冗長性）があると、無駄なデータ領域と面倒な更新処理を発生させてしまいます。

正規形には第１〜第５正規形までが存在します。

業務では第３正規形まで考えることが多いです。

第一正規化

第一正規化とは、「一つのフィールドには１つの値しか含まない」という原則が守られている状態ことを指します。

Q . なぜ１つのフィールドに複数の値を入れてはダメなのか？

→複数の値を許すと、主キーが各列の値を一意に定める事ができなくなるからです。

→主キーの定義に反します。

関数従属性

xの値を一つ決めれば、yの値が１つに決まる関係性のことを関係従属性と呼びます。

「yはxに従属する」のことを指しています。

まとめると、

正規化とは、「テーブルのすべての列が関数従属性を満たすように整理していくこと」であり、{x}→{y}に当たります。

第２正規形

部分関数従属が解消されていて、完全関数従属のみのテーブルになっている形です。

部分関数従属とは

→複数列からなる主キーの一部の列に対して従属する列がある状態。

完全関数従属は

→主キーを構成するすべての列に対して従属性がある状態。

Q. なぜ部分関数従属が良くないのか

→値の更新の手間が増えてしまうからです。

第３正規形

推移的関数従属が解消されている形です。

推移的関数従属

推移的関数従属とは、２段階の関数従属がある状態のことをいいます。

まとめ

正規化とは、テーブルのすべての列が関係従属性も満たすように整理することにより、データの冗長性を排除するプロセスのこと。

第１正規形では、１つのフィールドには１つの値が、

第２正規形では、部分関係従属の解消、

第３正規形では、推移的関数従属の解消を行っている

正規化したテーブルはJOINによる結合で正規化の前の状態に戻せる。

このことを無損失分解という。

正規化の逆操作は結合という。

2021-05-05

データベースと論理設計

プログラミング

f:id:kina_kq:20210505083029j:plain

データベースとは、

大量の情報を保存し、コンピュータから効率よくアクセスできるように加工したデータのあつまりのことをいいます。

データベースの由来

由来は第二次世界大戦後の米軍から来ていると言われています。

情報のアクセスを効率化するために点在していた資料をひとつの基地にすべて集め、その場所を、情報（Data）の基地（Base）と呼んだことからデータベースと名付けられたそうです。

データベース利用の流れ

キーワードとなるのは、SQL、RDBMS、RDBテーブルです。

データベースの利用は、

1. 利用者がSQLという言語を用いてRDBMSに指示を出す。

2. RDBMSはRDBテーブルにアクセスをして支持されたデータを取得や操作する

3. ビューという形になり我々利用者に届けられる

という流れで行われています。

データベース設計

データベース設計とは、

システム開発のひとつのプロセスです。

データベースに保持するデータに関する設計のことを言います。システムの拡張性やパフォーマンスに多大な影響を与えるシステム開発において極めて重要なプロセスです。

❏ システム開発のプロセス

要件定義
設計
開発
テスト

３層スキーマ

データベースは３層のスキーマ（枠組み）から成り立っています。

外部スキーマ（ユーザーからみたDB、ビュー）
概念スキーマ（開発者からみたDB、テーブル）
内部スキーマ（DBMSからみたDB、データの物理的配置）

上に行くほどユーザーに近く、下に行くほどコンピュータに近いです。

外部スキーマはビュー

概念スキーマはテーブル

内部スキーマはデータファイルの役割を担っています。

論理設計と物理設計

論理設計（概念スキーマ：テーブルの設計）

→データを管理するためのデータモデルの設計のことをいいます

物理設計（内部スキーマの設計）

→DDLによる実装やストレージの構成などの設計のことをいいます

概念スキーマはなぜ必要か

→データ独立性を確保するのに、概念スキーマは絶対に必要になります。

データ独立性とは？

データ独立性は2種類あります。

論理的データ独立性と物理的データ独立性の２種類です。

論理的データ独立性

→外部スキーマを変更しても内部スキーマを変更する必要がない状態。（外部スキーマでの変更が内部スキーマに及ばない）

物理的データ独立性

→内部スキーマを変更しても、外部スキーマを変更する必要がない状態（外部スキーマの変更が内部スキーマに及ばない）。

内部スキーマ外部スキーマが独立している状態のことをデータ独立性があるといいます。

論理設計が超重要な理由

概念スキーマを変更すると、外部スキーマにも内部スキーマにも影響がでるからです。

2021-05-04

フォームを作る

プログラミング

f:id:kina_kq:20210504075901j:plain

フォームに必要な要素

フォームに必要な要素は、

<form>、<label>、<input>、<textarea>、<button>の５つです。

<form>要素

<form>要素は、フォーム関連の集まりを表す要素です。

すべてのフォームは<form>要素から始まります。

<form action="/my-handling-form-page" method="post">

</form>

action 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義し、
method 属性は、データを送信するために使用する HTTP メソッド ( get または post ) を定義します。

<label>、<input>および<textarea>要素でウェジェットを追加する

連絡フォームはシンプルで 3 つのテキストフィールドを持っており、それぞれに対応した <label> がついています。

label要素で関連付けを行うと、ラベル部分のクリックでその部分を選択できるようになります。ラジオボタンやチェックボックス選択のときに役立ちます。

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
 </ul>

<li> 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするために用いられます。

<input> 要素でもっとも重要な属性は、type 属性です。この属性は <input> 要素の見た目や動作を定義するため、とても重要になっていきます。

<button>を追加する


<li class="button"> <button type="submit">メッセージを送信</button> </li>

<button> 要素は type 属性を受け付けます。

submit、reset、buttonの3 種類の値を受け付けます。

submit ボタンをクリックするとフォームのデータを<form>要素の action 属性で定義したウェブページへ送信します。
reset ボタンをクリックすると、直ちにすべてのフォームウィジェットを既定値にリセットされます。UX の観点ではこのボタンはバッドプラクティスであると考えられており、どうしても必要な理由がない限りこのボタンの使用は避けるようにしなければならないといわれています。
button ボタンをクリックすると...何も起きません。おかしなことのように見えますが、JavaScript を使用してカスタムボタンを作成するために驚くほど役立ちます。

見栄えを良くする

<style>

</style>

# <style>タグの中に、以下を入れると見栄えがよくなる

form {
  /* フォームをページの中央に置く */
  margin: 0 auto;
  width: 500px;
  /* フォームの範囲がわかるようにする */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* すべてのラベルを同じサイズにして、きちんと揃える */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* すべてのテキストフィールドのフォント設定を一致させる
     デフォルトで、textarea は等幅フォントが設定されている */
  font: 1em sans-serif;

  /* すべてのテキストフィールドを同じサイズにする */
  width: 300px;
  box-sizing: border-box;

  /* テキストフィールドのボーダーの外見を同一にする */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* アクティブな要素を少し強調する */
  border-color: #000;
}

textarea {
  /* 複数行のテキストフィールドをラベルにきちんと揃える */
  vertical-align: top;

  /* テキスト入力に十分な領域を与える */
  height: 5em;
}

.button {
  /* ボタンを他のテキストフィールドと同じ場所に置く */
  padding-left: 90px; /* label 要素と同じサイズ */
}

button {
  /* このマージンは、ラベルとテキストフィールドの間のスペースと
     おおよそ同じスペースを表す */
  margin-left: .5em;
}

保存して再読み込みすればOKです。

データをウェブサーバーに送信する

<form>要素はaction属性とmethod属性により、どこへどのようにデータを送信するかを定義します。

フォームコントロールにnameをつけます。

これらの名前はクライアント側とサーバー側の両側で重要になります。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。

データに名前をつけるために、各々のデータを集めるフォームウィジェットの name 属性を使用しなければなりません。

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>

  ...

この例では、フォームはそれぞれれ"user_name"、"user_email"、"user_message" と名付けられた 3 つのデータを送信します。これらのデータは URL "/my-handling-form-page" へ、HTTP POST メソッドで送信します。

サーバー側では URL "/my-handling-form-page" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。

参考

form要素 ≪ フォーム ≪ 要素 ≪ HTML5入門

HTML5/フォーム/label要素フォーム部品とラベルを関連付ける - TAG index

HTML5/フォーム/button要素内容を持つボタンを作る - TAG index

HTML5/ページ全般/style要素スタイルシートを指定する - TAG index

初めてのフォーム - ウェブ開発を学ぶ | MDN