如果选中单选按钮，仅使用CSS和HTML设置texarea的“ required”属性

Question

如果选中单选按钮，则需要在文本区域上添加属性“：required”；我不能使用javascript，只能使用CSS和html，可以吗？

实际上，如果选中了单选按钮，则必须填充文本区域，否则可以为空在此先感谢

Answer 1

Css仅控制样式而不验证样式，因此您无法使用css验证表单。

Answer 2

正如我在评论中说的：

没有JS是不可能的。 HTML / CSS没有if / else功能

---

我唯一不使用JS就能想到的事情>>

是

使用两个文本区域和一些CSS相邻选择器~，并已在hidden必需的文本区域中预先填充一个值：

[name='agree']:checked ~ [name='text_req'] { display: inline-block; }
[name='agree']:checked ~ [name='text']     { display: none; }

<form>
  <input name="agree" id="agree" type="checkbox"><label for="agree">I do</label>
  <br>
  <textarea name="text" placeholder="Explain why"></textarea>
  <textarea name="text_req" class="hide" required hidden>You must explain why</textarea>
  <br>
  <button>SUBMIT</button>
</form>

这绝对是
不优雅

，因为用户必须先清除prefilled文本值才能输入自己的文本；和两个文本区域正在提交。使用JavaScript

仅使用少量JavaScript来切换required属性：

const textarea = document.querySelector('[name=text]');
document.querySelector('[name=agree]').addEventListener('change', function() {
  textarea.required = this.checked;
  textarea.placeholder = this.checked ? "Must Explain why" : "Explain why";
});

<form>
  <label><input name="agree" type="checkbox">I do</label><br>
  <textarea name="text" placeholder="Explain why"></textarea><br>
  <button>SUBMIT</button>
</form>