网页学习 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>biaodan</title>
    <style>

    </style>
</head>
<body>
    <!-- form属性
           action表单要提交的服务器地址
    -->
    <form action="target.html">

        <!-- 文本框
                注意:数据要提交到服务器中必须要为元素指定一个name属性
        -->
    文本框 <input type="text" name="username">

     <br><br>
    <!-- 密码框 -->
    密码框<input type="password">

    <br><br>
    <!-- 单选按钮 
            1.这样的选择框必须指定value属性,最终会作为用户的填写的值
            2.checked可以将单选按钮设置为默认选中
    -->
    单选按钮<input type="radio" name="hello" value="a">
        <input type="radio" name="hello" value="b" checked>
 

        <br><br>
        <!-- 多选框 -->
        多选框<input type="checkbox" name="test" value="1">
              <input type="checkbox" name="test" value="2">
              <input type="checkbox" name="test" value="3" checked>

        <br><br>
        <!-- 下拉列表 
            selected设置为默认选项
        -->
        <select name="haha" id="">
            <option value="i">选项一</option>
            <option  selected value="ii">选项二</option>
            <option value="i">选项三</option>
        </select>
    
 <br><br>
    <!-- 提交按钮 
          不写value默认为提交按钮,它指定文字
    -->
    <input type="submit" value="注册">

    </form>

    
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="target.html">
        <input type="text" name="username" value="hello">

        <br><br>
        <input type="color">

        <br><br>
        <input type="email">

        <!-- autocapitalize="on"自动补充开启,off关上 -->
        <br><br>
        <input type="text" name="username" autocapitalize="on">

        <br><br>
        <!--  readonly将表单项设置为只读,数据会提交-->
        <input type="text" name="username"  value="hello" readonly>

        <br><br>
        <!-- disabled将表单项设置为禁用,数据不会提交 -->
        <input type="text" name="username" value="hi" disabled>

        <br><br>
        <!-- 重置按钮 -->
        <input type="reset">

        <br><br>
        <input type="sbmit">
        <br><br>
        <!-- 普通按钮 -->
        <input type="button" value="按钮">
            <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="butto">按钮</button>
    </form>
</body>
</html>

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值