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

发表于 更新于

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表单：

1
2
3
4
5
<form>  
.  
_form elements_  
.  
</form>

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

name属性

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

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

Pasted image 20210219172559.png

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>