Day02-HTML

Day02-HTML

---

表单标签<form></form>

---

<form name=""  action=""  method=""> </form>

用于向服务器提交数据；表单标签中必须包含表单项，可以是input，select或textaera；
一般情况下，写表单标签的时候最好把三种属性都写上，即name，action，method

属性：
* name：表单的名称属性
* action：form表单提交的路径，“#”表示提交到当前页面，用于测试用
* method：form表单的提交方式 ,一共有七种提交方式，常用的是两种方式get、post，默认情况下是get方式；
get：向服务器提交数据时，数据携带在请求路径，即就是显示在地址栏上。地址后面携带数据url?username=zhangsan&pw=12345&sex=male&hobby=football
post：HTTP请求的请求体中携带数据！

method中 get请求 和 post请求 的区别
1）携带数据的方式不同，get携带数据的方式是在ip地址栏上携带数据，而post携带数据的方式是在http请求中的请求体中携带数据。
2）安全性不同，post方式相对安全，也不是绝对的安全，因为有抓包工具等东西的存在。
3）携带数据大小的限制：get方式携带数据对数据的大小有限制，且各个浏览器的限制不尽相同，而post方式携带数据可以看成是没有限制（其实限制是有的，只是一般情况下都超不出post的限制）
4）method的默认情况是get方式；

---

*<form>标签的第一种表单项：<input />
* input标签，必须有name属性<input type="" name="" value="" >

 **所有的表单项，除了按钮button都必须有name属性，为什么按钮不用name属性，按钮是用来执行一些操作而不是携带数据到服务器的。
 所有的表单项，除了输入框和选择文件框和image外，都必须有value属性**

input标签系统默认状态下，在选中的时候，会出现一个蓝色的外边框，可以通过使用outline去除：
style=“outline:none;”（其实这是通过css去除的）

属性type：
type 表示input是哪种类型，决定了该标签的功能和样式，一共有10种常见属性值
1）text：输入框 ，最好指定maxlength属性

<form name="register" action="#" method="get">
  用户名 <input type="text" maxlength="15" placeholder="请输入用户名" />
</form>

这里多说一句，input标签中，value和placeholder的区别，value是input中的默认值，当鼠标光标移入到该input中的时候，value值不会消失，而placeholder是提示值，一旦光标焦点获取到了该input，那么placeholder的值会自动消失的。

2）password：密码框，以掩码的形式输入

<form name="register" action="#" method="get">
  用户名 <input type="text" maxlength="15"  /><br />
  密码<input type="password" maxlength="9"  placeholder="输入密码"/>
</form>

3）radio：单选框
必须制定name属性和value属性，同一组单选框具有相同的name属性值，否则无法实现单选功能，也要制定value属性
checked属性：checked = “checked”表明默认选中该属性。

<form name="register" action="#" method="get">
  用户名 <input type="text" maxlength="15" /><br />
  密码<input type="password" maxlength="9"/><br />
  性别<input type="radio" name="sex" value="male" checked="checked"/>男      &nbsp;&nbsp;&nbsp;
  <input type="radio" name="sex" value="female" /> 女
</form>

4） checkbox：多选按钮,要有name属性和value属性，同一组checkbox也要有相同的name属性值。同一组多选框应具有相同name，不然服务器会无法理解提交的数据；
checked属性：checked = “checked”表明默认选中该属性。

<form name="register" action="#" method="get">
  兴趣爱好<input type="checkbox" name="hobby" value="football" checked="checked" />足球 &nbsp;&nbsp;
  <input type="checkbox" name="hobby" value="baseball" />排球 &nbsp;&nbsp;
  <input type="checkbox" name="hobby" value="tableTannis" />乒乓球 &nbsp;&nbsp;
  <input type="checkbox" name="hobby" value="ball" />球 &nbsp;&nbsp;
</form>

5）file： 选择文件的表单项。

<form name="register" action="#" method="get">
  选择头像<input type="file" name="pic" />
 </form>

6）hidden：隐藏的表单项，作用就在于：向服务器提交内容，不让用户知道！
name属性，value属性。

7）button：普通按钮 没有内置任何功能，不用于向服务器提交数据，一般是结合js完成一些功能的。
value表示按钮上的字；普通按钮不内置任何功能。如果要加功能，需要用js代码添加功能

<input type="button" name="chooseme" value="点我点我"  />

8）submit：提交按钮 ，内置了提交表单的功能！
有默认的value“提交查询”,也可以自己指定value

9） image：图片按钮 内置了提交表单的功能！
src属性引入图片。

<input type="image" name="image" src="../img/electricAppliance/small07.jpg" />

10）reset：重置/恢复到默认状态

<input type="reset" name="reset" />

再强调一下：
input属性：
* name
表示该表单项的名称，除了按钮之外，都要有name。为什么按钮不用name属性，按钮是用来执行一些操作而不是携带数据到服务器的。
* value
表示表单项的值，除了输入框和选择文件框都必须有value；
* checked
是否被选中，checked=“checked”表示默认状态选中该项
* maxlenth 最大长度
*placeholder 提示
*disable：不可用状态，如果disable=“disable”,说明这个控件不可用；
*readonly：不能写入，但是光标能够获取焦点；如果readonly=“readonly”，说明该控件只读不可写。

---

*<form>标签的第二种表单项：<select />

---

• select标签<select><option>< /option></select>

  <select name="city" >
      <option value="gz">广州</option>
      <option value="sh">上海</option>
      <option value="cd" selected="selected">成都</option>
      <option value="sz">深圳</option>
  </select>

属性：
select标签
* name 必须有
* multiple： 可多选，按住ctrl多选 multiple = “multiple”

option标签
* value：表示该选项的内容/值，最好在option标签中写上value，不然默认提交的是option标签体中的值；
* selected：是否被选中 selected = “selected”那么就表示默认选中该option

---

*<form>标签的第三种表单项：<textarea >< /textarea>

---

• textarea标签<textarea> < /textarea>

<textarea name="sign" rows="16" cols="50"> 请输入个性签名</textarea>

*name
* cols 显示的行数，默认显示3行；
* rows 显示的列数
如果需要加上默认值，直接加入到标签体就可以了。