HTML表单

来源:互联网 发布:管家的面 淘宝 编辑:程序博客网 时间:2024/06/06 08:53

       HTML表单用于搜集不同类型的用户输入。下面介绍HTML及HTML5中的表单元素的使用方法。

   <form>元素

          用于定义HTML表单,其他表单元素包含在form元素内。

         使用方法:

<form>        form elements </form>

   表单元素

            表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等。

         <input>元素

              type

              1、<input type="text"> 定义用于文本输入的单行输入字段,默认宽度是20个字符。                   

<form>      First name: <input type="text" name="firstname"><br>      Last name: <input type="text" name="lastname"> </form>

              显示结果为:

                

              2、<input type="password"> 定义密码输入框,密码字段不会明文显示,而是以星号或圆点替代。       

<form>     Password: <input type="password" name="pwd"> </form>

              显示结果为:

                

              2、<input type="radio"> 定义单选按钮

<form>     <input type="radio" name="sex" value="male">Male<br>     <input type="radio" name="sex" value="female">Female </form>

              显示结果为:

              

              3、<input type="checkbox"> 定义多选按钮

<form>     <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>     <input type="checkbox" name="vehicle" value="Car">I have a car  </form>

               显示结果为:

               

              4、<input type="submit"> 定义提交表单按钮,点击提交按钮,输入数据会传送到action中的页面。

<form name="input" action="html_form_action.php" method="get">     Username: <input type="text" name="user">     <input type="submit" value="Submit"> </form>

              显示结果为:

                           

              5、<input type="buttton" value="按钮"> 定义按钮              

<form action="">    <input type="button" value="Hello world!"></form>

            显示结果为:

             另外<button>Hello world!</button>可达到同样的效果。

              action

                    定义在提交表单时执行的动作,若省略,则action会被设置为当前页面。

                    <form action="action_page.php">

             method

                   规定在提交表单时所用的http方法(get或post)

                   <form action="action_page.php" method="GET">

                   <form action="action_page.php" method="POST">

                  get与post的区别

0 0