HTML 第四章表单

        表单制作
1. 表单:数据填写和展示的核心标签
<form></form> 块元素
    子标签(行内元素):
1.<input type="text"/>   
    input里面也可以写一些属性  如 value、name、maxlength、、、
   

效果如下

 

 2.密码框

<input type="password"/>

密码框也可以加一下属性，和上面的账号框一样

这个密码框前面的＜label＞＜/label＞ 想加就加， 不加也行，这个主意作用是可以点击文件就可以直接输入，相当于提升使用者的体验感

效果如下

3 .单选按钮

<input type="radio"/>

 ＜label＞＜/label＞是使点击文字可以直接选择，可加可不加，主要是为了使用者的体验感

 

4.多选按钮

<input type="checkbox"/＞

 多选按钮可以点击多个如下图

 

5.列表框

 <select>

      <option></option>

    ....................

</select> 

 

下面是代码

 
           <!--列表框-->
           <!--selected默认选中-->
           日期:<select name="year">
           <option>2001</option>
           <option selected>2002</option>
           <option>2003</option>
           <option>2004</option>
           <option>2005</option>
           <option>2006</option>
           <option>2007</option>
           <option>2008</option>
           <option>2009</option>
           <option>2010</option>
           <option>2011</option>
           <option>2012</option>
                </select>年
           <select name="month">
               <option>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
               <option>6</option>
               <option>7</option>
               <option>8</option>
               <option>9</option>
               <option>10</option>
               <option>11</option>
               <option>12</option>
           </select>月
           <select name="day">
               <option>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
               <option>6</option>
               <option>7</option>
               <option>8</option>
               <option>9</option>
               <option>10</option>
               <option>11</option>
               <option>12</option>
               </select>日

效果展示

 

 6.多行文本域
 <textarea>显示文字</textarea>

效果展示

 

 7.按钮

  重置按钮:<input type="reset">

  普通按钮: <input type="button">

  提交按钮:<input type="submit">

  图形提交按钮:<input type="image"src="地址">