html常用表单标签

语法: <input type = ?/> 总共有10种,另外两种为文本域textarea,下拉列表选择框 select

问号代表的有以下十种:
  1. 文本框(默认——如果没有指定type,默认显示文本框)
   text 语法<input />
  2.密码框——password
  3.单选按钮——radio
  4.复选框——checkbox
  5.普通按钮——button
  6.提交按钮——submit
  7.重置按钮——reset
  8.文件域——file
  9.图像域——image
  10.隐藏域——hidden


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用表单</title>
    <!--表单子元素数据提交给后台,这个表单子元素的一定写name,
        如果没有写name就不会提交这个表单,
        除了这个四个: 提交按钮,重置按钮.普通按钮,图片按钮, 不要写name
    -->
</head>

<body>
    <!--action:  数据提交给谁
        method: 提交方式:   GET/POST,   安全性: 选择 POST, 默认: GET
        name:  给表单取一个名称
-->
    <form action="" method="GET">
        <label for="uname">文本框:</label>
        <input type="text" id="uname" name="username" /><br/>

        <label for="psw">密码框:</label>
        <input type="password" id="psw" name="password"/><br />

        <!--name一样说明是同一组,只能选择一个  checked为默认值-->
        单选按钮:
        <input type="radio" id="man" name="sex" value="man" checked/>
        <label for="man">男</label>
        <input type="radio" id="woman" name="sex" value="woman" />
        <label for="woman">女</label><br />

        复选按钮:
        <input type="checkbox" name="love" value="hx">滑雪
        <input type="checkbox" name="love" value="ps" checked>爬山
        <input type="checkbox" name="love" value="yy">游泳
        <input type="checkbox" name="love" value="sw">上网
        <input type="checkbox" name="love" value="tq">踢球<br />

        下拉列表选择框:
        <select name="city">
            <option  value="bj">北京市</option>
            <option  value="jx">江西市</option>
            <option  value="gd">广西市</option>
        </select><br />

        普通按钮:<input type="button" value="普通按钮" /><br />
        提交按钮:<input type="submit" value="登陆" /><br />
        重置按钮:<input type="reset" value="清空" /><br />
        图片按钮:<input type="image" src="图片地址"/><br />

        文件域: <input type="file" name="file1" /><br />
        影像域: <input type="image" src="../img/btn.jpg"/ width="192" height="120"><br />
        隐藏域: <input type="hidden" name="userId" value="111"/><br />

        <!-- rows=”数字”  页面上显示几行
             Cols=”数字”  页面上显示几列
        -->
        文本域: <textarea cols="50" rows="10">
                
        </textarea><br />

        日期:<input type="date" name="birthday"/><br />
     
    </form>
</body>

</html>

  




 

posted @ 2020-03-15 21:18  64Byte  阅读(742)  评论(0编辑  收藏  举报