前端入门学习笔记（六）HTML入门（五） 表单

表单

<form>标签、action属性、method属性

HTML表单用于搜集用户输入，<form>标签用于创建表单。并用action属性规定提交表单的时候，往何处发送数据。method则决定提交表单的方法：get或post，若没有指明，则默认为get。

<form action="https://www.baidu.com/s" method="get"> 
</form>

name属性

name 属性指定表单的名称。

要接收用户输入，你需要相应的表单元素，如文本字段。而输入类型是由类型属性（type）定义的，大多数经常被用到的输入类型有：text，password，radio，checkbox，submit 等。

<form>
   id:<input type="text" name="username" /><br />
   ps:<input type="password" name="password" />
</form>

单选框、复选框、提交按钮

两个框都是由input 赋予属性实现的，value是用于表单提交的值。 <input type="radio"> 标签定义了表单单选框选项。

<form>
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female
</form>

<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮

提交按钮将表单提交到其 action 属性

<input type="submit" value="显示文字" /> 

百度搜索框实例

<form action="https://www.baidu.com/s" method="get">
    <input type="text" name="wd" value="hello baidu">
    <input type="submit" value="百度一下">
</form>

这边就需要提一下GET，GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连。
上面所列出的代码中，name为 wd ，value为 hello baidu，则发送的数据为
https://www.baidu.com/baidu?wd=hello+baidu
明显可以看出，为action?name=value的格式

这个网址是如何找到的呢？学到现在有了一点HTML基础，可以打开www.baidu.com，按下F12，则可以查看当前网页的源代码。
以下是百度搜索页面表单部分

可以看到action = “/s”，即会在当前网址最后加上 /s，则变成了https://www.baidu.com/s