ChatGPTとは
使い方のガイド
文例・例文のサンプル
ChatGPTについて教えて
始め方(はじめかた)、書き方
プロンプトのテンプレート

AIへの会話指示文/プロンプト

image

HTMLの下書きを生成させる

21     6806   𝕏 シェア


基本的な使い方

まず、フォームを作成してもらう例です。


制約条件と構成要件を守って、
HTMLでフォームを記述してください。

#制約条件:
・▼★GET★▲メソッドで送信します。送信先はダミーでOK。
・<form>から</form>の範囲のみ書いてください。
・すべての要素に、nameとidとclass属性を入れてください。
・nameとidの値はダミーで補ってください。classの値は空欄でOK。
・テキスト入力要素には、placeholder要素を入れて、値を補ってください。
・チェックボックスとラジオボタンの選択肢には、label要素(for属性)を入れてください。


#構成要件
▼★メールアドレス:
・1行入力、最大文字数200文字、入力必須
お名前:
・1行入力、最大文字数20文字、入力任意
電話番号:
・1行入力、最大文字数20文字
誕生日:
・月: プルダウン(1月から12月まで)
・日: プルダウン(1日から31日まで)
性別:
・ラジオボタン(男性、女性、その他)
職業:
・ラジオボタン(既卒、新卒、学生)
ご希望の内容:
・チェックボックス(「資料請求」、「見学参加」、「その他」)
備考欄:
・テキストエリア(幅300ピクセル、高さ200ピクセル)★▲
>

<form method="GET" action="/dummy" id="myForm" class="">
<label for="email">メールアドレス:</label>
<input type="text" name="email" id="email" class="" placeholder="メールアドレスを入力してください" maxlength="200" required>

<label for="name">お名前:</label>
<input type="text" name="name" id="name" class="" placeholder="お名前を入力してください" maxlength="20">

<label for="phone">電話番号:</label>
<input type="text" name="phone" id="phone" class="" placeholder="電話番号を入力してください" maxlength="20">

<label for="month">誕生日:</label>
<select name="month" id="month" class="">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<!-- 略 -->
<option value="11">11月</option>
<option value="12">12月</option>
</select>

<label for="day">日:</label>
<select name="day" id="day" class="">
<option value="1">1日</option>
<option value="2">2日</option>
<option value="3">3日</option>
<!-- 略 -->
<option value="30">30日</option>
<option value="31">31日</option>
</select>

<label for="gender">性別:</label><br>
<input type="radio" name="gender" id="gender-male" class="" value="男性">
<label for="gender-male">男性</label>
<input type="radio" name="gender" id="gender-female" class="" value="女性">
<label for="gender-female">女性</label>
<input type="radio" name="gender" id="gender-other" class="" value="その他">
<label for="gender-other">その他</label><br>

<label for="occupation">職業:</label><br>
<input type="radio" name="occupation" id="occupation-graduate" class="" value="既卒">
<label for="occupation-graduate">既卒</label>
<input type="radio" name="occupation" id="occupation-fresh" class="" value="新卒">
<label for="occupation-fresh">新卒</label>
<input type="radio" name="occupation" id="occupation-student" class="" value="学生">
<label for="occupation-student">学生</label><br>

<label for="interests">ご希望の内容:</label><br>
<input type="checkbox" name="interests" id="interests-material" class="" value="資料請求">
<label for="interests-material">資料請求</label>
<input type="checkbox" name="interests" id="interests-visit" class="" value="見学参加">
<label for="interests-visit">見学参加</label>
<input type="checkbox" name="interests" id="interests-other" class="" value="その他">
<label for="interests-other">その他</label><br>

<label for="remarks">備考欄:</label><br>
<textarea name="remarks" id="remarks" class="" placeholder="ご要望や質問があればご記入ください" rows="5" cols="40"></textarea><br>

<input type="submit" value="送信">
</form>

 

他のバリエーション

次は、テーブルを作成してもらう例です。
最近はテーブルをあまり使わないので、作り慣れていない人にもオススメです。


制約条件と構成要件を守って、
HTMLでテーブルを記述してください。

#制約条件:
・<table>から</table>の範囲のみ書いてください。
・下位の要素に、idとclassと属性を入れてください。
・idとclassの値はダミーで補ってください。ただし、各列ごとにclassの値は変えます。
・構成要件が空欄のセルは、空欄のままでOK。

#構成要件▼★
・表頭:
|学年|クラス|氏名|
・表の本体:
中身は空欄で、3行分★▲
>

<table>
<thead>
<tr>
<th id="header1" class="column1">学年</th>
<th id="header2" class="column2">クラス</th>
<th id="header3" class="column3">氏名</th>
</tr>
</thead>
<tbody>
<tr>
<td id="cell1-1" class="column1"></td>
<td id="cell1-2" class="column2"></td>
<td id="cell1-3" class="column3"></td>
</tr>
<tr>
<td id="cell2-1" class="column1"></td>
<td id="cell2-2" class="column2"></td>
<td id="cell2-3" class="column3"></td>
</tr>
<tr>
<td id="cell3-1" class="column1"></td>
<td id="cell3-2" class="column2"></td>
<td id="cell3-3" class="column3"></td>
</tr>
</tbody>
</table>

 
テーマ デザイン・Web制作技術・プログラミング
タスク コーディング
タグ #プログラミング
動作環境の例 OpenAI ChatGPT 3.5~
投稿・編集日 2023/06/18・2023/06/18
提案者 まめたろう
出典・参考 なし
留意事項 他の「プロンプト集」へ収載する場合は、出典として本サイトのURLを明示してください



お気に入り機能は登録不要で使えます
※このブラウザ内にのみ保存されます



ご提案を受付ています

サイトの拡充・改善に取り組んでいます。
感想やリクエストなどお気軽にどうぞ
ご提案フォームを開く