时间戳

首页 > 解决方案 > 必需的标记在 HTML 表单中不起作用

html - 必需的标记在 HTML 表单中不起作用

问题描述

我想要达到的目标：

  1. 用于订购商品的 HTML 表单。
  2. 数量字段仅在选择相应项目时出现。
  3. 使其成为必需。

我面临什么问题：

  1. 我正在尝试NAME的必需标签，但是当我提交表单而不填写名称时，表单允许我提交并且不会提示我填写名称字段。
  2. 还没有想出“我想要实现的目标：2 ” 的代码

<form>
  NAME
  <input type="text" name="NAME" id="NAME" required/> <br />
  <br>
  EMAIL
  <input type="email" name="EMAIL" id="EMAIL"> <br />
  <br>
  DEPARTMENT
  <select name="DEPARTMENT" id="DEPARTMENT">
    <option>HR</option>
    <option>DMS</option>
    <option>RIM</option>
  </select><br />
  <br>
  PURPOSE
  <select name="PURPOSE" id="PURPOSE">
    <option>NEW KIT</option>
    <option>EXCHANGE KIT</option>
  </select><br/>
  <br>
  SHIRT 1 
  <select name="SHIRT1" id="SHIRT1">
    <option></option>
    <option>XS</option>
    <option>S</option>
    <option>M</option>
    <option>L</option>
    <option>XL</option>
    <option>2XL</option>
    <option>3XL</option>
    <option>4XL</option>
    <option>5XL</option>
    <option>6XL</option>
    <option>7XL</option>
  </select><br />
  <br>
  QTY
  <SELECT name="QTY1" id="QTY1">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </SELECT> <br />
  <br>
  PANT 1
  <select name="PANT1" id="PANT1">
    <option></option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
    <option>32</option>
    <option>33</option>
    <option>34</option>
    <option>35</option>
    <option>36</option>
    <option>37</option>
    <option>38</option>
    <option>39</option>
    <option>40</option>
    <option>41</option>
    <option>42</option>
    <option>43</option>
    <option>44</option>
    <option>45</option>
    <option>46</option>
    <option>47</option>
    <option>48</option>
  </select><br />
  <br>
  QTY
  <select name="QTY2" id="QTY2">
    <option></option>
    <option>1</option>
    <option>2</option>
  </select>
  <br />
  <br>
  SHIRT 2
  <select name="SHIRT2" id="SHIRT2">
    <option></option>
    <option>XS</option>
    <option>S</option>
    <option>M</option>
    <option>L</option>
    <option>XL</option>
    <option>2XL</option>
    <option>3XL</option>
    <option>4XL</option>
    <option>5XL</option>
  </select>
  <br />
  <br>
  QTY
  <SELECT name="QTY3" id="QTY3">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </SELECT>
  <br />
  <br>
  PANT 2
  <select name="PANT2" id="PANT2">
    <option></option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
    <option>32</option>
    <option>33</option>
    <option>34</option>
    <option>35</option>
    <option>36</option>
    <option>37</option>
    <option>38</option>
    <option>39</option>
    <option>40</option>
    <option>41</option>
    <option>42</option>
    <option>43</option>
    <option>44</option>
    <option>45</option>
    <option>46</option>
    <option>47</option>
    <option>48</option>
  </select>
  <br />

  <br>
  QTY
  <select name="QTY4" id="QTY4">
    <option></option>
    <option>1</option>
    <option>2</option>
  </select>
  <br />
  <br>
  SAFETY SHOES
  <select name="SAFETYSHOES" id="SAFETYSHOES">
    <option></option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
  <br />
  <br>
  QTY
  <select name="QTY5" id="QTY5">
    <option></option>
    <option>1</option>
  </select>
  <br />
  <br>
  JACKET
  <select name="JACKET" id="JACKET">
    <option></option>
    <option>S</option>
    <option>M</option>
    <option>L</option>
    <option>XL</option>
  </select>
  <br />
  <br>
  QTY
  <select name="QTY6" id="QTY6">
    <option></option>
    <option>1</option>
  </select>
  <br />
  <br>
  SAFETY VEST 
  <select name="SAFETYVEST" id="SAFETYVEST">
    <option></option>
    <option>1</option>
  </select>
  <br />
  <br>
  POUCH 
  <select name="POUCH" id="POUCH">
    <option></option>
    <option>1</option>
  </select>
  <br />
  <br>
  LANYARD 
  <select name="LANYARD" id="LANYARD">
    <option></option>
    <option>1</option>
  </select>
  <br />
  <br>
  REASONS/REMARKS
  <br >
  <textarea name="RR" id="RR" cols="40" rows="8" placeholder="Fill this if you are exchanging kit"></textarea>

</form>
<input type="button" id="b1" onClick="insert_value()" value="Insert"></input>

标签： htmlrequired

解决方案

我已将输入类型按钮更改为提交，它应该在表单元素内。这是更新的代码。

<form>
    NAME
    <input type="text" name="NAME" id="NAME" required/> <br />
    <br>
    EMAIL
    <input type="email" name="EMAIL" id="EMAIL"> <br />
    <br>
    DEPARTMENT
    <select name="DEPARTMENT" id="DEPARTMENT">
        <option>HR</option>
        <option>DMS</option>
        <option>RIM</option>
    </select><br />
    <br>
    PURPOSE
    <select name="PURPOSE" id="PURPOSE">
        <option>NEW KIT</option>
        <option>EXCHANGE KIT</option>
    </select><br/>
    <br>
    SHIRT 1
    <select name="SHIRT1" id="SHIRT1">
    <option></option>
        <option>XS</option>
        <option>S</option>
        <option>M</option>
        <option>L</option>
        <option>XL</option>
        <option>2XL</option>
        <option>3XL</option>
        <option>4XL</option>
        <option>5XL</option>
        <option>6XL</option>
        <option>7XL</option>
    </select><br />
    <br>
    QTY
    <SELECT name="QTY1" id="QTY1">
    <option></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </SELECT> <br />
    <br>
    PANT 1
    <select name="PANT1" id="PANT1">
        <option></option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
        <option>32</option>
        <option>33</option>
        <option>34</option>
        <option>35</option>
        <option>36</option>
        <option>37</option>
        <option>38</option>
        <option>39</option>
        <option>40</option>
        <option>41</option>
        <option>42</option>
        <option>43</option>
        <option>44</option>
        <option>45</option>
        <option>46</option>
        <option>47</option>
        <option>48</option>
    </select><br />
    <br>
    QTY
    <select name="QTY2" id="QTY2">
        <option></option>
        <option>1</option>
        <option>2</option>
    </select> <br />
    <br>
    SHIRT 2
    <select name="SHIRT2" id="SHIRT2">
        <option></option>
        <option>XS</option>
        <option>S</option>
        <option>M</option>
        <option>L</option>
        <option>XL</option>
        <option>2XL</option>
        <option>3XL</option>
        <option>4XL</option>
        <option>5XL</option>
    </select> <br />
    <br>
    QTY
    <SELECT name="QTY3" id="QTY3">
        <option></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </SELECT>
    <br />
    <br>
    PANT 2
    <select name="PANT2" id="PANT2">
        <option></option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
        <option>32</option>
        <option>33</option>
        <option>34</option>
        <option>35</option>
        <option>36</option>
        <option>37</option>
        <option>38</option>
        <option>39</option>
        <option>40</option>
        <option>41</option>
        <option>42</option>
        <option>43</option>
        <option>44</option>
        <option>45</option>
        <option>46</option>
        <option>47</option>
        <option>48</option>
    </select>
    <br />

    <br>
    QTY
    <select name="QTY4" id="QTY4">
        <option></option>
        <option>1</option>
        <option>2</option>
    </select>
    <br />
    <br>
    SAFETY SHOES
    <select name="SAFETYSHOES" id="SAFETYSHOES">
        <option></option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
    <br />
    <br>
    QTY
    <select name="QTY5" id="QTY5">
        <option></option>
        <option>1</option>
    </select>
    <br />
    <br>
    JACKET
    <select name="JACKET" id="JACKET">
        <option></option>
        <option>S</option>
        <option>M</option>
        <option>L</option>
        <option>XL</option>
    </select>
    <br />
    <br>
    QTY
    <select name="QTY6" id="QTY6">
        <option></option>
        <option>1</option>
    </select>
    <br />
    <br>
    SAFETY VEST 
    <select name="SAFETYVEST" id="SAFETYVEST">
        <option></option>
        <option>1</option>
    </select>
    <br />
    <br>
    POUCH 
    <select name="POUCH" id="POUCH">
        <option></option>
        <option>1</option>
    </select>
    <br />
    <br>
    LANYARD 
    <select name="LANYARD" id="LANYARD">
        <option></option>
        <option>1</option>
    </select>
    <br />
    <br>
    REASONS/REMARKS
    <br >
    <textarea name="RR" id="RR" cols="40" rows="8" placeholder="Fill this if you are exchanging kit"></textarea>
  <input type="submit" id="b1" onClick="insert_value()" value="Insert"></input>
</form>

要启用选择更改的数量，这些是我在您的选择框中的 1 中所做的更改，您可以为其他人复制相同的内容

<select name="SHIRT1" id="SHIRT1" onchange="enableQuantity(this.value, 'QTY1')">
        <option value=""></option>
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
    </select><br />
    <br>
    QTY
    <SELECT name="QTY1" id="QTY1" disabled>
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </SELECT>

和 javascript

function enableQuantity(selectValue, qtyEle) {
  document.getElementById(qtyEle).disabled = selectValue ? false : true;
}

希望这有效

推荐阅读