読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマー兼SEです。好きな習慣:TDD、好きなツール:WorkFlowy、好きな言語:C#、好きなAWSのサービス:Data Pipeline。趣味は開発環境を改善することです。

button要素 formtarget属性

HTML5

button要素のformtarget属性は、form要素のtarget属性と同じ意味をもちますが、form要素よりも優先されます。

使用例

start.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hello! HTML5</title>
<meta charset="UTF-8">
</head>
<body>
    <form action="./regeister.html" method="post" enctype="text/plain" id="order" target="_blank">
        <p>
            名前:<input type="text" id="name" />
        </p>
        <p>
	<button type="submit">結果を別のタブに表示</button>
        <button type="submit" formtarget="_self">結果を同じタブに表示</button>
        </p>
    </form>
</body>
regeister.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hello! HTML5</title>
<meta charset="UTF-8">
</head>
<body>
登録しました。
</body>

レンダリング

初期表示

[結果を別のタブに表示]クリック

[結果を同じタブに表示]クリック