学习html5标签的使用2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- table、input、select、a -->
    <a href="hello.html">跳转页面</a>
    <!-- 单独的图片标签,单独显示图片,不会提交到服务器 -->
    <img src="./touxiang.png" title="提示信息">
    <!-- form表单的作用主要是提交信息到服务器 -->
    <form action="hello.html">
    <!-- input是行级标签,不会自动换行<br>是换行标签 -->
    <!-- input:[t\p\r\c\i] -->
    用户名: <input type="text" value="请输入文本"><br><br>
    <!-- 中文&emsp;英文&nbsp; -->
    密&emsp;码:<input type="password" value="123456"><br><br>
    单选:
    <!-- 多单选项,name这个属性要相同,才可以实现单选 -->
    <!-- 单选和多选,后面的文本是显示到界面的值,如果选中,value是值,一般到js会用 -->
    <input type="radio" name="radio1" value="M">男
    <input type="radio" name="radio1" value="W">女<br><br>
    多项:
    <input type="checkbox" name="check1" value="1">电子类
    <input type="checkbox" name="check2">多项2
    <input type="checkbox" name="check3">多项3<br><br>
    图片:
    <input type="image" src="./touxiang.png" title="提示信息"><br><br>
    文件上传:
    <input type="file" ><br><br>
    普通的按钮:
    <input type="button" value="按钮的名称"><br><br>
    提交的按钮:
    <!-- 按钮submit会提交信息到服务器的地址,form表单中action的属性 -->
    <input type="submit" value="提交的按钮">
    重置按钮:
    <!-- 按钮重置form表单的填写的信息到初始状态 -->
    <input type="reset" value="重置按钮">
    <!-- 隐藏标签 你是看不到的,比如说,要修改用户信息,但是不想显示用户ID,可以使用隐藏的输入标签
    提交到服务器是可以获取隐藏标签的值-->
    <input type="hidden" name="">
    下拉框:
    <select>
        <option value="1">选项1</option>
        <option value="2" selected="selected">选项2</option>
        <option value="3">选项3</option>
    </select>
    <br><br>
    分组选项:
    <select>
        <optgroup label="一线城市">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </optgroup>
        <optgroup label="二线城市">
            <option value="">杭州</option>
            <option value="">厦门</option>
            <option value="">南京</option>
        </optgroup>
    </select>
    <br><br>
    多行文本:
    <textarea name="" id="" cols="30" rows="10">
    比如一些备注信息
    </textarea>
    
    </form>
</body>
</html>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值