HTML表单元素1（文本框、密码框、表单、单选框、复选框、下拉列表、文本域）

• HTML的文本框 <INPUT TYPE="TEXT">
  
  <input type="text"> 即表示文本框 
  并且只能够输入一行 
  如果要输入多行 
  使用文本域<textarea> 
  注： <input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样的。 
  并且<input> 这样的写法也是满足标准的
  
  1.文本框
  

  <input type="text">

  
  2.设置文本框的长度
  使用属性size
  

  <input type="text" size="10">

  
  3.初始值
  使用属性value
  

  <input type="text" value="有初始值的文本框">

  
  4.有背景文字的文本框
  使用属性placeholder 
  placeholder是一个html5的属性，对于大多数的已经支持html5的浏览器来说，是可以看到效果的，但是对于老的不支持html5的浏览器，比如ie8，就看不到效果
  

  <input type="text" placeholder="请输入账号">

• <INPUT TYPE="PASSWORD">
  
  密码框
  输入的数据会自动显示为星号
  <input type="password"> 即表示密码框
  
  
• HTML的表单标签<FORM>，以及GET和POST的区别
  <form>用于向服务器提交数据，比如账号密码
  
  1.表单
  action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去
  这里把数据提交到服务端的login.jsp去了
  
  

  <form action="/study/login.jsp">
  账号：<input type="text" name="name"> <br/>
  密码：<input type="password" name="password" > <br/>
  <input type="submit" value="登陆">
  </form>

  
  2.method="get"
  使用method="get" 提交数据 是常用的提交数据的方式 
  如果form元素没有提供method属性，默认就是get方式提交数据 
  get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到
  
  
  

  <form method="get" action="/study/login.jsp">
  账号：<input type="text" name="name"> <br/>
  密码：<input type="password" name="password" > <br/>
  <input type="submit" value="登陆">
  </form>

  
  3.method="post"
  使用method="post" 也可以提交数据 
  post不会在地址栏显示提交的参数 
  如果要提交二进制数据，比如上传文件，必须采用post方式
  
  
  

  <form method="post" action="http://how2j.cn/study/login.jsp">
  账号：<input type="text" name="name"> <br/>
  密码：<input type="password" name="password" > <br/>
  <input type="submit" value="登陆">
  </form>

  
  4.get和post的区别
  get 
  是form默认的提交方式 
  如果通过一个超链访问某个地址，是get方式 
  如果在地址栏直接输入某个地址，是get方式 
  提交数据会在浏览器显示出来 
  不可以用于提交二进制数据，比如上传文件 
  post 
  必须在form上通过 method="post" 显示指定 
  提交数据不会在浏览器显示出来 
  可以用于提交二进制数据，比如上传文件
  
  
• HTML的单选框 <INPUT TYPE="RADIO" >
  
  <input type="radio" > 表示单选框
  
  1.单选框
  两个单选，都可以同时选中。 为了达到，同一时间，只能选中其一的效果，需要使用分组
  

  单选1 <input type="radio" >
  单选2 <input type="radio" >

  
  2.默认选中
  

  默认选中 <input type="radio" checked="checked" >

  
  3.分组
  分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框 
  设置name属性相同即可
  

  <p>今天晚上做什么？</p>
   
  学习java<input type="radio" name="activity" value="学习java" > <br/>
  东京<input type="radio" checked="checked"  name="activity" value="tokyo" > <br/>
  dota<input type="radio" name="activity" value="dota" > <br/>
  LOL<input type="radio" name="activity"  value="lol"> <br/>

• HTML的复选框 <INPUT TYPE="CHECKBOX">
  
  <input type="checkbox"> 即表示复选框
  
  1复选框.（name不一定要相同，没影响，提交到后台才有用到）
  

  <p>今天晚上做什么？</p>
    
  学习java<input type="checkbox" value="学习java" > <br/>
  东京<input type="checkbox" checked="checked"  name="activity" value="tokyo" > <br/>
  dota<input type="checkbox" value="dota" > <br/>
  LOL<input type="checkbox" value="lol"> <br/>

• HTML的下拉列表 <SELECT> 详解
  
  <select> 即下拉列表 
  需要配合<option>使用
  
  1.下拉列表
  

  <select >
   <option >1</option>
   <option >2</option>
   <option >3</option>
  </select>

  
  2.设置高度
  使用属性size
  

  <select  size="2">
   <option >1</option>
   <option >2</option>
   <option >3</option>
  </select>

  
  3.设置可以多选
  使用ctrl或者shift进行多选
  

  <select size="3" multiple="multiple">
   <option >1</option>
   <option >2</option>
   <option >3</option>
  </select>
  

  
  4.默认选中
  对option元素设置selected="selected" 属性
  

  <select size="3" multiple="multiple">
   <option >1</option>
   <option selected="selected">2</option>
   <option selected="selected">3</option>
  </select>
  

• HTML的多行文本框-文本域 <TEXTAREA>
  
  <textarea> 即文本域 
  与文本框不同的是，文本域可以有多行，并且可以有滚动条
  
  1.文本域
  

  <textarea>abc
  def
  </textarea>

  
  2.设置宽度和行数
  使用属性cols和rows
  

  <textarea cols="30" rows="8">123456789012345678901234567890
  1234567890
  1234567890
  1234567890
  1234567890
  1234567890
  1234567890
  1234567890</textarea>