前端学习路线-7-表单验证

lamirs2021年2月8日大约 2 分钟

Let our advance worrying become advance thinking and planning. — Winston Churchill

本系列关注前端部分,根据学习路线图达到学习Vue.js的目的
developer路线图developer-roadmap/translations/chinese at master · kamranahmedse/developer-roadmap

快速跳转

目录:前端学习路线-目录下一节:前端-惯例和最佳实践

HTML表单用于收集用户输入。用户输入最经常发送到服务器进行处理。

更多见HTML Forms

`<form>`元素

HTML<form>元素用于创建用于用户输入的HTML表单：

<form>  
.  
_form elements_  
.  
</form>

该<form>元件是用于不同类型的输入元件，诸如容器：文本字段，复选框，单选按钮，提交按钮等

`name`属性

请注意，每个要提交的输入字段必须具有name属性。

如果省略该name属性，则将完全不发送输入字段的值。

本示例将不提交"含有'name'的输入(input)字段"的值：

<!DOCTYPE html>
<html>
<body>

<h2>The name Attribute</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<p>Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.</p>

</body>
</html>

HTML表单元素

HTML<form>元素可以包含以下一个或多个表单元素：

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

`<input>`element

最常用的表单元素之一是<input>element。

该<input>元素可以根据type 属性显示出几种不同方式

submit / text 以及checkbox 等等

<!DOCTYPE html>
<html>
<body>

<h2>The input Element</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>