HTML5技术

HTML5中表单的创建 - *茉莉花开*

字号+ 作者:H5之家 来源:博客园 2015-11-19 18:08 我要评论( )

一、常用表单标签如下: (1)input中的type属性: 复选框-checkbox;单选按钮-radio;按钮-button;提交-submit; (2)文本域 行-cols;列-rows; form 表单 input 输入域 textarea 文本域 label 控制标签 fieldset 定义域 legend 域的标题 select 选择列表 optg

一、常用表单标签如下:

 (1)<input>中的“type”属性:

   复选框-checkbox;单选按钮-radio;按钮-button;提交-submit;

(2)文本域

  行-cols;列-rows;

  

<form> 表单

<input> 输入域

<textarea> 文本域

<label> 控制标签

<fieldset> 定义域

<legend> 域的标题

<select> 选择列表

<optgroup> 选项组

<option> 下拉列表中的选项

<button> 按钮

 二、常见表单标签的应用

  1、输入用户名以及密码表单的制作

    (1)主要代码:

        <form>
              用户名:<input type="text" />
                密码:<input type="password" />
                <br />
         </form>

    (2)实现效果:

 

  2、复选框的使用:

    (1)主要代码:

     <form>
            你喜欢的水果有?<br />
            苹果<input type="checkbox" />
            西红柿<input type="checkbox" />
            香蕉<input type="checkbox" />
            菠萝<input type="checkbox" />
     </form>

    (2)实现效果:

 

  3、单选按钮的使用:

    (1)主要代码:

      <form>

       请选择您的性别:
            男<input type="radio" />
            女<input type="radio"/>
      </form>

    (2)实现效果:

 

  4、下拉列表的使用

    (1)主要代码

      <form>

         <select>
                <option></option>
                  <option></option>
                  <option></option>
              </select>

      </form>

    (2)实现效果

 

  5、按钮的使用

    (1)主要代码

      <form>

       <input type="button" value="按钮" /><br />     //“value”用来定义按钮上面的值
            <input type="submit" /> <br />
            <input type="reset" /><br /><br />        //”reset“用来重置表单里的内容
       </form>

    (2)实现效果

  

 

 

 

6、文本框的使用

    (1)主要代码

      <textarea cols="10" rows="15">在此输入文字</textarea>

    (2)实现效果

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评
5