HTML基础02

表单form

  • 作用:用于获取用户输入的信息,并且将信息提交到服务器
  • 学习表单就是学习表单中有哪些控件.比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(vheckboxes)等等。
  • 表单通常使用表单标签<from>来设置:

   <form> <input /> </form> 

  • 文本框:通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

    <input type="text" name="username" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" 

    <!-- 文本框 value:默认值 placeholder:占位文本 maxlength:最大字符长度 readonly:只读,固定不变-->

  • 密码框:过标签<input type="password"> 来定义:

    <input type="password" name="pwd" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >
    <!-- 文本框和密码框的属性通用 -->
  • 单选框:<input type="radio"> 标签定义了表单单选框选项

    <input id="xxx" type="radio" name="xxx" value="xx" checked="checked">
    <label for="xxx">xxxx</label>

     <!-- 单选框:必须写value,如果不写提交过去的内容都是on,label中的for与单选框的id一致,可以点label里的文本选择对应的单选框

     checked="checked":默认选中-->

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

    <input id="xxx" type="checkbox" name="xxx" value="xx" checked="checked">
    <!-- 复选和单选属性通用 -->
  • 日期:

     <input type="date" name="xxx"> 
    
  • 文件

     <input type="file" name="xxxx"> 
    
  • 文本域

    <textarea name="xxx" cols="20" rows="5" placeholder="xxxx"></textarea>
  • 下拉选 city=bj

 

  

<select name="city">
    <option value="bj">北京</option>
    <option value="sh" selected="selected">上海</option>
    <option value="sz">深圳</option>
</select>    
<!-- 下拉选 selected="selected":默认选中-->

 

HTML基础02

上一篇:js面向对象实现简易购物车


下一篇:CSS3的过渡效果,使用transition实现鼠标移入/移出效果