form表单

表单经常会用到，也是很重要的一个知识点，下边我将梳理html中form表单的应用

form是一个块标签，写在最开始，对其属性input进行包裹，有两个属性值，分别是action以及method

action：指向的是表单提交的地址，提交后会跳到指定地址

地址url的构成：协议：//域名（或IP:端口号） 路径 ？ 参数信息

method：指数据的提交方式，有post和get

post方式：信息以打包方式发送，信息传递很安全。是推荐的方式。

get方式： 信息以明文方式发送，并且会暴露在地址栏中。是默认的方式

表单元素

<input type=" " name=" " value=" ">

其中，type是表单元素的类型，name是作用域、关键词，value是表单元素的值

对type值的认识

<input type="text" placeholder="请输入用户名">

最简单的进行文本输入，想要文本框上有提示文本时，使用placeholder

<input type="password" placeholder="请输入密码">

对密码进行加密，有专属的type值，密码以暗文的形式显示

<input type="radio" name="gender" checked> <span>男</span>

<input type="radio" name="gender">

radio 是单选框的属性值，需要name配合使用，即划定了作用之后，才可实现单选功能

checked是默认选择

<input type="checkbox" name="hobby"><span>阅读</span>

<input type="checkbox" name="hobby"><span>旅行</span>

checkbox 是复选框，需要使用name划定作用域

<input type="submit" value="百度一下">

submit是提交按钮，信息将提交到指定的地址中，并且原始按钮上的文字是提交

可以使用value进行修改

<input type="reset" value="刷新">

reset是对表单信息进行重置，同样可以改变原来默认的文字

<input type="submit" value="百度一下">

submit是提交按钮，信息将提交到指定的地址中，并且原始按钮上的文字是提交

可以使用value进行修改

<input type="hidden" name="">

上述代码的实现：

<!-- action 数据提交的地址 -->

<!-- 表单提交的特点： 提交后会跳转到指定地址 -->

<form action="#">

<!-- //form 进行信息提交 -->

<!-- form 块标签 -->

<!-- 资源类的标签基本上都是行块标签 -->

<!-- placeholder 显示在文本上边，输入时消失 -->

<input type="text" placeholder="请输入用户名">

<br>

<!-- password 输入的文字内容会进行加密 -->

<input type="password" placeholder="请输入密码">

<!-- name划定作用域，也是关键词 -->

<!-- checked 是默认选择 -->

<p>请选择你的性别</p>

<p>

<span>男</span>

<input type="radio" name="gender" checked>

</p>

<p>

<span>女</span>

<input type="radio" name="gender">

</p>

<!-- 复选框 -->

<p>您的爱好</p>

<p>

<input type="checkbox" name="hobby">

<span>阅读</span>

</p>

<p>

<input type="checkbox" name="hobby">

<span>旅行</span>

</p>

<p>

<input type="checkbox" name="hobby">

<span>烹饪</span>

</p>

<p>

<input type="checkbox" name="hobby" checked>

<span>movie</span>

</p>

<!-- 按钮 -->

<input type="submit" value="百度一下">

<input type="reset" value="刷新">

<input type="hidden" name="">

</form>