CREATEFORMクリエイトフォーム関数

本ページには広告が含まれています。

フォーム画面を生成します。並行処理フラグがTrueの場合、InternetExplorer オブジェクトのメソッド・プロパティが利用できます。

複数のデータを一度にまとめて渡したいときに使用します。単一のデータを送信する場合はINPUT関数でも代用できます。

フォームの値を取得するにはGETFORMDATA関数、設定するにはSETFORMDATA関数を使います。

構文
  1. InternetExplorer = CREATEFORM( HTMLファイル, タイトル, 並行処理フラグ, オプション指定, 幅, 高さ, X, Y )
引数
HTMLファイル （String）必須
フォームとして表示するHTMLファイル名
タイトル （String）必須
表示するタイトル
並行処理フラグ （Boolean = False）省略可
FALSE
Submit属性のボタンが押されるまで処理を返さない （デフォルト）
TRUE
待たない
オプション指定(複数指定可) （#createform）省略可
FOM_NOICON
クローズボタンを出さない
FOM_MINIMIZE
最小化ボタンを表示する
FOM_MAXIMIZE
最大化ボタンを表示する
FOM_NOHIDE
Submit属性のボタンが押されても画面を消さない
FOM_NOSUBMIT
Submit属性のボタンが押されても Submitに割り当てられた処理をしない
FOM_NORESIZE
ウィンドウのサイズ変更不可
FOM_BROWSER
ターゲット名解決のため、コントロールを最上位レベルのブラウザとする
FOM_FORMHIDE
フォームを非表示状態で起動する
FOM_TOPMOST
フォームを最前面固定にする
FOM_NOTASKBAR
タスクバーにアイコンを出さない
FOM_FORM2
２つ目のフォームを作成する（フォームは２つまで作成可）
幅,高さ （Integer）省略可
サイズ
X,Y （Integer）省略可
位置
戻り値
並行処理フラグ=FALSE
押されたボタンの Name
並行処理フラグ=TRUE
フォームの COMオブジェクト

注：<form>がありデータが多い場合はPOST指定に(デフォルトのGETでは制限がある為)「<form method="POST">」

デフォルトのレンダリングモードはIE7相当です。変更が必要な場合は(IE9に変更したい場合)、「<head>部に <meta http-equiv="X-UA-Compatible" content="IE=9">」を記述。

フォームとは

会員登録や商品の購入、お問い合わせをするときの入力欄のことを指します。CREATEFORM関数では作成したHTMLファイルのフォームを表示することができます。データの取得・設定はGETFORMDATA関数、SETFORMDATA関数で行います。

フォーム作成に必要な要素

フォームは以下の要素を組み合わせて作成します。

テキストフィールド
ユーザーが自由にテキストを入力するための要素です。1行で文字数制限があります。
ラジオボタン
複数の選択肢から1つだけ選ぶことができる要素です。【例】性別
セレクトボックス
ラジオボタンと同じ機能を持つ要素ですが、選択肢をプルダウンメニューから選ぶことができます。選択肢が少ない場合はラジオボタン、多い場合はセレクトボックスを使います。【例】都道府県
チェックボックス
複数の選択肢からいくつかの項目をチェックができる要素です。
テキストエリア
ユーザーがテキストを入力するための要素です。テキストフィールドとは違い、複数行で長い文章を書くことができます。
送信ボタン
入力したデータを送信するためのボタンです。

フォーム作成に必要なタグ

フォームを作成するには以下に示すタグを使います。また、そのタグで使える属性を箇条書きで示しています。

form
フォームを作成するためのタグです。フォームとは入力欄・ボタンなどの集まりを指します。
input
テキストフィールドを作成します。type属性でテキストフィールドに入力できる形式を決めます。
select
セレクトボックスを作成するためのタグです。optionタグに選択肢を指定し全体をselectタグで囲むことでセレクトボックスとして機能させることができます。
option
セレクトボックスに書く選択肢を作成するためのタグです。
textarea
テキストエリアを表示するためのタグです。
label
フォームの中でフォームの項目名と構成する部品（チェックボックスやラジオボックス）を関連付けるためのタグです。
button
これまでに入力したフォームの内容を送信するのに使います。

指定できる属性

name属性

入力欄の名前を指定します。GETFORMDATA関数、SETFORMDATA関数で値を取得・設定するにはこの値を指定します。

method属性

form要素で、データの送信方法（HTTPメソッド）を指定します。指定できる値はgetもしくはpostのどちらかです。

minlength属性

入力できる最小文字数を定義します。

maxlength属性

入力できる最大文字数を定義します。パスワードや電話番号で入力ミスや不正な値を防ぐことができます。

value属性

input要素で表される入力欄がフォームで送信する値の初期値を指定します。GETFORMDATA関数、SETFORMDATA関数で重複するname属性がある場合、Valueにこの値を指定します。

required属性

指定されたタグの入力を必須項目にします。この属性の要素が空欄の場合、送信ボタンを押したときに入力を促すメッセージが表示されます。

placeholder属性

テキストボックスの入力例などヒントを表示します。textarea要素やinput要素のtype属性がtextの要素で使用できます。

type属性

inputタグで指定します。属性値には以下のいずれかを指定することができます。

text
1行のテキストを入力できます。
number
半角数字のみ入力できます。
tel
電話番号を入力できます。pattern属性で入力パターンを指定します。
pattern
入力パターンを正規表現で指定します。
placeholder
テキストボックスに入力例を表示します。
email
メールアドレスのみ入力できます。
url
URLのみ入力できます。
password
入力内容を●●●で非表示にできます。
search
検索キーワードを入力するときに使います。
reset
フォームの内容をリセットします。
submit
フォームの内容を送信します。
image
画像を選択、送信します。
date
カレンダーから日付を入力できます。
datetime-local
日付・時間を入力できます。
month
年と月を入力できます。
week
年と週を入力できます。
time
時間と分を入力できます。
radio
ラジオボタンで複数の選択肢の中から一つだけ選択できます。
checkbox
複数の選択肢から必要な数だけ選択できます。
hidden
ユーザーに見せる必要のないデータを送信するたきに使用します。
button
ボタンを表示します。子要素を持たせたい場合はbuttonタグを使用します。
file
ファイルアップロードボタンを表示します。accept属性でファイルの種類を制限することができます。
color
カラーパレットを表示します。
range
範囲を選択できるバーを表示します。

フォームの作り方

例として、以下のような項目を取得するためのフォームを作成します。

  • 名前
  • 性別…男性、女性の選択肢
  • 出身地…プルダウンメニューで地域区分を選択、例として47都道府県を記述すると長くなるので

まず、フォームを作るにはformタグを使います。送信する内容が少ない場合はmethod属性にGET、自由に記述できるテキストエリアを使う場合などデータ量が多くなる場合はPOSTを指定します。

入力ボックスなどの要素はこのformタグの中に記述していきます。

HTML
<html>
	<head></head>
	<body>
		<form method="POST"></form>
	</body>
</html>

inputタグで名前を入力するフォームを作ります。名前はテキスト1行で書けるので、type属性にtextを指定。name属性に入力された項目を表す名前をつけます。名前なのでnameでも良いですが、説明でわかりやすくするために今回はusernameと指定します。

tableタグを使って形を整えていきます。プレビュータブで表示の確認ができます。

  • HTML
  • プレビュー
HTML
<html>
	<head></head>
	<body>
		<form method="POST">
			<table>
				<tr>
					<th>名前</th>
					<td><input type="text" name="username"/></td>
				</tr>
			</table>
		</form>
	</body>
</html>

次に性別を選択する項目を追加します。性別は複数の中から一つだけ選択するので、ラジオボタンを使います。type属性にradioを指定。name属性に性別を意味する英単語のsexを指定。value属性にそれぞれの選択肢を意味する名前を指定します。

ラジオボタンは同じname属性のうち一つしか選択できないようになっているので、同じ名前をつけます。

  • HTML
  • プレビュー
HTML
<html>
	<head></head>
	<body>
		<form method="POST">
			<table>
				<tr>
					<th>名前</th>
					<td><input type="text" name="username"/></td>
				</tr>
				<tr>
					<th>性別</th>
					<td>
						<input type="radio" name="sex" value="man" />男性
						<input type="radio" name="sex" value="woman" />女性
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

次に出身地を選択するプルダウンメニューの作成。これも性別と同じ複数の項目から一つを選択するのですが、項目が多いのでプルダウンメニューで作成します。selectタグで枠を作り、中にoptionタグで項目をリスト化していきます。

  • HTML
  • プレビュー
HTML
<html>
	<head></head>
	<body>
		<form method="POST">
			<table>
				<tr>
					<th>名前</th>
					<td><input type="text" name="username"/></td>
				</tr>
				<tr>
					<th>性別</th>
					<td>
						<input type="radio" name="sex" value="man" />男性
						<input type="radio" name="sex" value="woman" />女性
					</td>
				</tr>
				<tr>
					<th>出身地</th>
					<td>
						<select name="region">
							<option value="">▼選択</option>
							<option value="北海道地方">北海道地方</option>
							<option value="東北地方">東北地方</option>
							<option value="関東地方">関東地方</option>
							<option value="中部地方">中部地方</option>
							<option value="近畿地方">近畿地方</option>
							<option value="中国地方">中国地方</option>
							<option value="四国地方">四国地方</option>
							<option value="九州地方">九州地方</option>
						</select>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

最後にinputタグでtype属性がsubmitの送信ボタンを作成します。value属性にボタンに表示する文字列を指定します。

この送信ボタンを押すとフォームが閉じ、入力した内容がGETFORMDATA関数で取得できます。

  • HTML
  • プレビュー
HTML
<html>
	<head></head>
	<body>
		<form method="POST">
			<table>
				<tr>
					<th>名前</th>
					<td><input type="text" name="username"/></td>
				</tr>
				<tr>
					<th>性別</th>
					<td>
						<input type="radio" name="sex" value="man" />男性
						<input type="radio" name="sex" value="woman" />女性
					</td>
				</tr>
				<tr>
					<th>出身地</th>
					<td>
						<select name="region">
							<option value="">▼選択</option>
							<option value="北海道地方">北海道地方</option>
							<option value="東北地方">東北地方</option>
							<option value="関東地方">関東地方</option>
							<option value="中部地方">中部地方</option>
							<option value="近畿地方">近畿地方</option>
							<option value="中国地方">中国地方</option>
							<option value="四国地方">四国地方</option>
							<option value="九州地方">九州地方</option>
						</select>
					</td>
				</tr>
			</table>
			<input type="submit" value="送信" />
		</form>
	</body>
</html>

非表示フォームの操作

オプション指定でFOM_FORMHIDEを指定した場合、CTRLWIN関数で表示させるか、ACW関数でx,y座標、もしくは幅・高さのどちらか一方もしくは両方を指定すると表示されます。

UWSC
DIM IE = CREATEFORM("form.html", "", TRUE, FOM_FORMHIDE)

DIM ID = GETID(, "TFormHtm")
CTRLWIN(ID, SHOW)
UWSC
DIM IE = CREATEFORM("form.html", "", TRUE, FOM_FORMHIDE)

DIM ID = GETID(, "TFormHtm")

// 以下のいずれかを実行で表示
ACW(ID, x, y)
ACW(ID,,, 幅, 高さ)
ACW(ID, x, y, 幅, 高さ)

文字化け

文字化けする場合はheadタグ内にmetaタグを追加し、charset属性に文字コードを指定します。

文字コードはテキストファイルと同じ文字コードを指定します。HTMLファイルの文字コードはメモ帳で開いたときのステータスバー右下で確認することできます。

HTML
<head>
	<meta charset="文字コード">
</head>

指定できる文字コードはおもに以下のとおりです。

  • UTF-8
  • SHIFT_JIS
  • EUC-JP

UTF-8を指定する場合は以下のように記述します。

HTML
<head>
	<meta charset="UTF-8">
</head>

以下はHTMLファイルの文字コードをANSI（Shift_JIS）で設定しているが、ブラウザはmetaタグのUTF-8で解釈するので文字化けが発生します。

.png 文字化け.png

このように文字化けが発生する場合は、以下のようにHTMLファイルとmetaタグの文字コードを揃えると文字化けを解消することができます。

.png .png

ウィンドウの操作

指定できる幅・高さはウィンドウサイズではなくクライアント領域のサイズで、初期値は(幅,高さ)=(640,480)です。

X,Y座標を省略した場合、画面中央に表示されます。

CREATEFORM関数で幅・高さ、x座標・y座標の指定がうまく行かない場合は、フォームを生成してからACW関数で位置やサイズを指定することもできます。

UWSC
DIM ID = GETID(, "TFormHtm")
ACW(ID, x, y, 幅, 高さ)

ウィンドウ全体の幅・高さを指定

以下はウィンドウの幅を640、高さを480に設定する例です。

UWSC
DIM IE = CREATEFORM("form.html", "タイトル", TRUE)

CONST width = 640
CONST height = 480

DIM ID = GETID(, "TFormHtm")

ACW(ID, 0, 0, width, height)

WHILE IE.Visible
	SLEEP(0.001)
WEND

ウィンドウのクライアント領域の幅・高さを指定

以下はウィンドウのクライアント領域の幅を640、高さを480に設定する例です。

UWSC
DIM IE = CREATEFORM("form.html", "タイトル", TRUE)

CONST w = 640
CONST h = 480

DIM ID = GETID(, "TFormHtm")
DIM width = STATUS(ID, ST_WIDTH) - STATUS(ID, ST_CLWIDTH)
DIM height = STATUS(ID, ST_HEIGHT) - STATUS(ID, ST_CLHEIGHT)
width = width + w
height = height + h

ACW(ID, 0, 0, width, height)

WHILE IE.Visible
	SLEEP(0.001)
WEND

ウィンドウサイズの指定を自動化

X,Y座標、幅・高さを省略した場合デフォルトでは画面中央に(640, 480)のサイズで表示されますが、以下のプログラムではまず指定したpathのHTMLファイルを非表示で読み込みbodyタグのサイズ・余白を取得してその値からウィンドウのサイズを計算・設定します。この処理を行うことでフォームのウィンドウを最適なサイズで表示することができます。ACW関数を実行した時点でフォームが表示されます。

UWSC
DIM path = "form.html"				// フォームのHTMLファイル名
DIM formTitle = "タイトル"			// フォームのタイトル

IE = CREATEFORM(path, formTitle, TRUE, FOM_FORMHIDE)		// 位置・サイズ調整のため非表示でフォームを起動

WITH IE.Document.body
	DIM w = .offsetWidth			// bodyタグの幅
	DIM h = .offsetHeight			// bodyタグの高さ
	WITH .currentStyle
		DIM marginVertical = VAL(REPLACE(.marginTop, "px", "")) + VAL(REPLACE(.marginBottom, "px", ""))			// マージンの上下の合計値
		DIM marginHorizontal = VAL(REPLACE(.marginLeft, "px", "")) + VAL(REPLACE(.marginRight, "px", ""))		// マージンの左右の合計値
	ENDWITH
ENDWITH

DIM ID = GETID(formTitle, "TFormHtm")		// フォームのIDを取得
DIM width = w + marginHorizontal + STATUS(ID, ST_WIDTH) - STATUS(ID, ST_CLWIDTH)			// クライアント領域からウィンドウ幅を計算
DIM height = h + marginVertical + STATUS(ID, ST_HEIGHT) - STATUS(ID, ST_CLHEIGHT)		// クライアント領域からウィンドウ高さを計算
DIM x = (G_SCREEN_W - width) / 2			// 画面幅から画面中央に表示するためのx座標を求める
DIM y = (G_SCREEN_H - height) / 2			// 画面高さから画面中央に表示するためのy座標を求める

ACW(ID, x, y, width, height)				// フォームを計算した位置・幅・高さで表示

WHILE IE.Visible
	SLEEP(0.001)
WEND

ウィンドウを最適なサイズ（最小サイズ）で取得するためbodyタグにdisplay: inline-block;は必ず指定してください。marginを指定する場合はピクセル単位で指定します。em、rem、%、vwなど他の単位には対応していません。

HTML
<html>
	<head>
		<style>
		<!--
			body{display:inline-block;margin: 5px 10px;}
		-->
		</style>
	</head>
	<body>
	</body>
</html>

頻繁に使うのであれば以下のように関数化しても良いかもしれません。

CREATEFORM関数の第一引数、第二引数、第四引数のみを指定するだけで使えます。第三引数の並行処理フラグはTRUEを指定しないと非表示にできないので、引数の指定は省略しています。

2行目にあるCREATEFORM関数の第四引数は、フォームを非表示にするFOM_FORMHIDEとoptionsで指定された値の論理和（OR）を取ることでoptionsとFOM_FORMHIDEのオプションを指定することができます。

UWSC
FUNCTION CreateFormEx(path, title, options = FALSE)
	RESULT = CREATEFORM(path, title, TRUE, options OR FOM_FORMHIDE)		// 位置・サイズ調整のため非表示でフォームを起動

	WITH RESULT.Document.body
		DIM w = .offsetWidth			// bodyタグの幅
		DIM h = .offsetHeight			// bodyタグの高さ
		WITH .currentStyle
			DIM marginVertical = VAL(REPLACE(.marginTop, "px", "")) + VAL(REPLACE(.marginBottom, "px", ""))			// マージンの上下の合計値
			DIM marginHorizontal = VAL(REPLACE(.marginLeft, "px", "")) + VAL(REPLACE(.marginRight, "px", ""))		// マージンの左右の合計値
		ENDWITH
	ENDWITH

	DIM ID = GETID(title, "TFormHtm")		// フォームのIDを取得
	DIM width = w + marginHorizontal + STATUS(ID, ST_WIDTH) - STATUS(ID, ST_CLWIDTH)			// クライアント領域からウィンドウ幅を計算
	DIM height = h + marginVertical + STATUS(ID, ST_HEIGHT) - STATUS(ID, ST_CLHEIGHT)		// クライアント領域からウィンドウ高さを計算
	DIM x = (G_SCREEN_W - width) / 2			// 画面幅から画面中央に表示するためのx座標を求める
	DIM y = (G_SCREEN_H - height) / 2			// 画面高さから画面中央に表示するためのy座標を求める

	ACW(ID, x, y, width, height)				// フォームを計算した位置・幅・高さで表示
FEND

プログラム実行例

フォーム（並行処理あり）

並行処理フラグがTRUEなのでフォームのCOMオブジェクト名が返ります。

UWSC
IE = CREATEFORM("form.html", "プロフィール", TRUE, FOM_MINIMIZE OR FOM_MAXIMIZE, 350, 350)

SETFORMDATA("山田太郎", "name")	 // テキストボックス
SETFORMDATA(TRUE, "sex", "man")	 // ラジオボタン
SETFORMDATA("30代", "age")	 // セレクトボックス
SETFORMDATA("東北", "pref")	 // セレクトボックス

WHILE IE.Visible
	SLEEP(0.001)
WEND

PRINT GETFORMDATA("name")
PRINT GETFORMDATA("sex")
PRINT GETFORMDATA("age")
PRINT GETFORMDATA("pref")
[syntaxHighlight language="HTML"]
名前
性別
男性 女性
年齢
都道府県
[/syntaxHighlight] .png
使用関数

フォーム（並行処理なし）

並行処理フラグがFALSEなので押されたボタンのname属性が返ります。

UWSC
SELECT CREATEFORM("form.html", "プロフィール", FALSE, FOM_MINIMIZE OR FOM_MAXIMIZE, 350, 350)
	CASE "ok"
		PRINT GETFORMDATA("name")
		PRINT GETFORMDATA("sex")
		PRINT GETFORMDATA("age")
		PRINT GETFORMDATA("pref")
	CASE "cancel"
		PRINT "キャンセルされました"
	CASE "close"
		PRINT "ウィンドウが閉じられました"
SELEND
[syntaxHighlight language="HTML"]
名前
性別
男性 女性
年齢
都道府県
[/syntaxHighlight] .png
使用関数

関連記事

GETFORMDATA関数 (スクリプト関数)
SETFORMDATA関数 (スクリプト関数)
STOPFORM関数 (スクリプト関数)
STOPFORM関数は、UWSCのプログラム再生時に出るSTOPボタンの表示/非表示を制御する関数です。