17、表单

最新推荐文章于 2024-09-16 06:30:00 发布

雪花酥01

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量87

点赞数 2

分类专栏：大前端 # html 文章标签：前端 html css

本文链接：https://blog.csdn.net/shuozai1204/article/details/141127534

版权

大前端同时被 2 个专栏收录

164 篇文章 0 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
		form 表单容器

		input：表单元素
			type:表单的类型
				text:文本输入框
				submit:提交按钮
				button:按钮
				reset:重置
				password：密码
				radio:单选按钮
				checkbox:多选按钮
				file:文件域 上传文件

		textarea:多行文本输入框
		select：下拉框 select里面必须包含option
	 -->
<form>
    <!-- 文本输入框 -->
    <input aria-label="" type="text" name="">
    <br>
    <!-- 密码输入框 -->
    <input aria-label="" type="password" name="">
    <br>
    <!--
        label与input建立联系 当我点击姓名的时候，就能获取inout输入框的焦点
        for与你想要关联的inout输入框的id一致
      -->
    <label for="xqa">姓名：</label>
    <input type="text" name="" id="xqa">
    <label for="zq">姓名：</label>
    <input type="text" name="" id="zq">
    <br>
    <!-- 提交按钮 能够提交到接口地址 -->
    <input type="submit" name="">
    <!-- 重置按钮 -->
    <input type="reset" name="" value="清空">
    <button>我也是按钮</button>
    <br>
    <!-- placeholder 文本输入框默认的提示内容 -->
    姓名： <input aria-label="" type="text" name="" placeholder="请输入姓名">
    <!-- value 是设置input输入框默认展示的内容 -->
    <!-- disabled 表单禁用 -->
    年龄： <input aria-label="" type="text" name="" value="18" disabled>
    <br>
    <!-- 上传文件 -->
    <input type="file" name="">
    <br>
    <!-- checked 设置默认选中的内容 -->
    <!-- 单选按钮需要配合name使用 给多个radio设置相同的name属性才能实现单选 -->
    <input aria-label="" type="radio" name="sex">男
    <input aria-label="" type="radio" name="sex" checked>女
    <input aria-label="" type="radio" name="sex">不详
    <br>
    <!-- checkbox多选按钮 -->
    <input aria-label="" type="checkbox" name="" checked>唱歌
    <input aria-label="" type="checkbox" name="">睡觉
    <input aria-label="" type="checkbox" name="">打游戏
    <br>
    <!-- 多行文本输入框 rows行 cols列 -->
    <textarea aria-label="" rows="20" cols="30"></textarea>
    <br>
    <!--
         select里面必须包含option  一个option是一个选项
         selected 默认选中
         hidden 隐藏
         disabled 禁用
      -->
    <select aria-label="">
        <option selected hidden>请选择省份</option>
        <option>山东</option>
        <option>北京</option>
        <option>上海</option>
        <option>河北</option>
        <option disabled>河南</option>
    </select>
</form>
</body>
</html>