AIへの会話指示文/プロンプト
基本的な使い方
まず、フォームを作成してもらう例です。
>
制約条件と構成要件を守って、
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を明示してください |
お気に入り機能・自分用ノートは、ユーザー登録不要で使えます!お気に入り機能は登録不要で使えます
※このブラウザ内にのみ保存されます
ご提案を受付ています
サイトの拡充・改善に取り組んでいます。 感想やリクエストなどお気軽にどうぞ |
ご提案フォームを開く |