猫史档案馆

<form> 元素

H喵L 表单用于收集用户输入。

<form> 元素定义 H喵L 表单：

 

H喵L 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

 

<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

 

文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

<form>
  姓名:<br />
  <input type="text" name="name">
  <br /><br />
  电话:<br />
  <input type="number" name="tel">
</form>

你可以在输入框内输入信息，第一个是文本输入（text），第二个是数字（number），其实还有很多其他的输入格式。PS：文本输入text的默认最大长度是20个字符，如果想获得更多，就需要单独设置了。

 

单选/复选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

<input type="checkbox"> 定义复选按钮。

<form>
  性别：<br />
  <input type="radio" name="喵" value="male" checked>小哥哥<br />
  <input type="radio" name="喵" value="female">小姐姐
  <br /><br />
  爱好：<br />
  <input type="checkbox" name="hobby" value="hobby1">火锅<br />
  <input type="checkbox" name="hobby" value="hobby2">烧烤<br />
  <input type="checkbox" name="hobby" value="hobby3">牛排<br />
  <input type="checkbox" name="hobby" value="hobby4">小姐姐<br />
</form>

单选是radio，复选是checkbox，在上面的例子中，我在性别男这个选项里加了checked，意思是默认值，就是一开始默认选项是男。

 

提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<form action="yamol02.html">
  姓名:<br />
  <input type="text" name="name">
  <br /><br />
  电话:<br />
  <input type="number" name="tel">
  <br /><br />
  <input type="submit" value="提交">
</form>

这里就可以初见表单的端倪了，action="yamol02.html"，如果不设置actio，那么就默认把值提交给当前页面，我把表单的数据提交给yamol02.html页面，所以我点击提交后就跳转了，注意上方网页的变化，提交过后，你就能看到我提交的值，比如姓名，性别，爱好等，默认是都可以看到信息的，所以呢，你想要保护好你的信息，就要用到method。

 

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST，默认是GET）：

<form action="yamol02.html" method="get">
  ·
</form>


<form action="yamol02.html" method="post">
  ·
</form>

get会显示你提交的信息，post不会。

我本来想给大家演示一下post的参数传递，但是呢，出了点问题，因为单纯的html页面之间是不能用post传递数据的，要开web服务器，所以，我以后会给大家看到的~~~

另外，大家应该都看到了，每一个需要传递数据的<input>里都有一个name，如果没有的话，是无法实现传递的哦。