teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

HTMLの追加

2020/05/17 13:00

投稿

miSaito
miSaito

スコア16

title CHANGED
File without changes
body CHANGED
@@ -21,4 +21,90 @@
21
21
  ### 補足
22
22
  発火出来るようになったら「URLに"new"が入っていたら一度リロードする」というようにしたいと思っています。
23
23
  ↓このページです
24
- http://localhost:3000/player/new/vocal
24
+ http://localhost:3000/player/new/vocal
25
+ このページのHTML
26
+ ```ここに言語を入力
27
+ <div class="wrapper-new">
28
+ <%=render "header"%>
29
+ <div class="main-new">
30
+ <div class="box-form">
31
+ <div class="new-titles">
32
+ <h2>フォーム入力【ボーカル】</h2>
33
+ <div class="progress">
34
+ <div class="progress-bar1">
35
+ <h5>カテゴリー選択</h5>
36
+ <div class="progress-bar-circle1"><i class="fas fa-check"></i></div>
37
+ <p>フォーム入力</p>
38
+ <div class="progress-bar-circle2"></div>
39
+ </div>
40
+ <div class="progress-bar2">
41
+ <p>掲載完了</p>
42
+ <div class="progress-bar-circle3">
43
+ </div>
44
+ </div>
45
+ </div>
46
+ <%=form_with(scope: :vocal, model: @vocal, url: player_new_vocal_path, local: true) do |f| %>
47
+ <% if @vocal.errors.any? %>
48
+ <div class = "alert alert-warning">
49
+ <ul>
50
+ <% @vocal.errors.full_messages.each do |message| %>
51
+ <li><i class="fas fa-exclamation-circle"></i><p><%= message %></p></li>
52
+ <% end %>
53
+ </ul>
54
+ </div>
55
+ <% end %>
56
+ <div class="form-name" ontouchstart="">
57
+ <h3>名前 / ペンネーム<span>必須</span></h3>
58
+ <%= f.text_field :name, placeholder: "例: taro takuroku", class: "name-field" %>
59
+ </div>
60
+ <div class="form-style">
61
+ <h3>演奏スタイル/ジャンル<span>必須</span></h3>
62
+ <%= f.text_area :style, placeholder: "例:Rock、R&B、Irish", class: "style-area" %>
63
+ </div>
64
+ <div class="form-daw">
65
+ <h3>DAW<span>必須</span></h3>
66
+ <%= f.text_area :daw, placeholder: "例:Logic Pro X、Pro Tools", class: "daw-area" %>
67
+ </div>
68
+ <div class="form-gender">
69
+ <h3>性別<span>必須</span></h3>
70
+ <%= f.select :gender, [ ["男性"], ["女性"], ["その他"]], prompt: "--" %>
71
+ </div>
72
+ <div class="form-keyrange">
73
+ <h3>キーレンジ<span>任意</span></h3>
74
+ <%= f.text_area :keyrange, placeholder: "例:地声:A3〜D5 裏声:C5〜E5", class: "keyrange-area" %>
75
+ </div>
76
+ <div class="form-equipment">
77
+ <h3>録音機材<span>必須</span></h3>
78
+ <%= f.text_area :equipment, placeholder: "例:【マイク】NEUMANN U87Ai、【I/O】FireFaceUCX、【マイクプリ】NEVE 1073", class: "equipment-area" %>
79
+ </div>
80
+ <div class="form-sns">
81
+ <h3>SNSアカウント<span>どちらか必須</span></h3>
82
+ <%= f.text_field :sns, placeholder: "例:https://twitter.com/Remote__Rec", class: "sns-field" %>
83
+ </div>
84
+ <div class="form-contact">
85
+ <h3>連絡先<span>どちらか必須</span></h3>
86
+ <%= f.text_field :contact, placeholder: "例:xxxxx@gmail.com", class: "contact-field" %>
87
+ </div>
88
+ <div class="form-language">
89
+ <h3>言語<span>必須</span></h3>
90
+ <%= f.text_field :language, placeholder: "例:日本語、英語(UK)", class: "language-field" %>
91
+ </div>
92
+ <div class="form-sample">
93
+ <h3>サンプル<span>任意</span></h3>
94
+ <%= f.text_field :sample, placeholder: "例:https://recording", class: "sample-field" %>
95
+ </div>
96
+ <div class="form-comment">
97
+ <h3>コメント<span>必須</span></h3>
98
+ <%= f.text_area :comment, placeholder: "例:納期:即日〜3日 ご依頼時にご相談ください。メジャーでの演奏経験あり!どんなジャンルでもお任せください。", class: "comment-area" %>
99
+ </div>
100
+ <div class="form-submit">
101
+ <label>
102
+ <%= f.submit "確認ページへ", class: "submit-btn"%>
103
+ <i class="fas fa-arrow-circle-right"></i>
104
+ </label>
105
+ </div>
106
+ <% end %>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ ```

1

URLの追記

2020/05/17 13:00

投稿

miSaito
miSaito

スコア16

title CHANGED
File without changes
body CHANGED
@@ -19,4 +19,6 @@
19
19
 
20
20
  ```
21
21
  ### 補足
22
- 発火出来るようになったら「URLに"new"が入っていたら一度リロードする」というようにしたいと思っています。
22
+ 発火出来るようになったら「URLに"new"が入っていたら一度リロードする」というようにしたいと思っています。
23
+ ↓このページです
24
+ http://localhost:3000/player/new/vocal