<!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 id="" name="" action="提交服务器的路径" method="提交方式 post || get(默认)">
<!-- readonly只读 后台可以获取到该控件的值 disable失效 后台获取不到 -->
<!-- text文本框按钮 placehoder默认文本框的字 -->
<input type="text" list="skill" maxlength="6" placeholder="请输入" readonly>
<!-- 密码框-->
<input type="password">
<!-- radio单选框 实现单选name值必须相同 value在单选里是向后台提交的值-->
<!--lable标签 点击这个文字时相当于点击了id=mid的件-->
<input type="radio" name="sex" id="mid" checked value="m">
<label for="mid">男</label>
<input type="radio" name="sex" id=""> 女
<!-- checkbox多选框 name值也必须相同 后台通过相同的name值获取 -->
<input type="checkbox" name="skil" id=""> 吃饭 <p></p>
<input type="checkbox" name="skil" id="" > 洗衣服<p></p>
<input type="checkbox" name="skil" id=""> 做饭
<!-- 下拉框 选择对应的城市 后台获取对应的value值-->
<select name="" id="">
<option value="">请选择城市</option>
<option value="1" >大连</option>
<option value="2">北京</option>
<option value="3">沈阳</option>
</select>
<!-- 文本域 -->
<textarea name="" id="" cols="50" rows="20"></textarea><br>
<!-- 文件对象 -->
<input type="file"><br>
<!-- 隐藏域 常用于不想显示出来 但后台需要获取的数据 例如修改时候的账户id-->
<input type="hidden">
<!-- 日期 -->
<input type="date" name="" id="" value="2023-10-10"><p></p>
<!-- 按钮 -->
<input type="button" name="" id="" value="按钮">
<!-- 重置 恢复默认状态 -->
<input type="reset" value="重置">
<!-- 提交 根据action定义的路径提交到服务器-->
<input type="submit" name="" id="" value="提交" >
<!-- 取色板 着色器 -->
<input type="color" name="" id="">
<!--数字控件 value默认值 min最小值 max最大值 -->
<input type="number" name="" id="" value="1" min="1" max="5">
<!-- 滑块 -->
<input type="range" name="" id="" min="0" max="100" step="1">
<!-- 日期加时间 定时的时候用 -->
<input type="datetime-local">
<!-- 邮箱地址 -->
<input type="email" name="" id="">
<!-- 地址 -->
<input type="url" name="" id="">
</form>
<!-- 一个页面可以有多个表单 -->
<!-- fieldset 对表单控件进行分组 划分出来-->
<!-- disabled 该组内所有控件都是失效的 -->
</form>
<fieldset disabled>
<legend style="margin-left: 300px;">登录模块</legend>
<label for="username">用户名</label>
<input type="text" name="" id="username">
<label for="password">密码：</label>
<input type="password" name="" id="password">
</fieldset>
</form>
<!-- datalist 规定了 <input> 元素可能的选项列表 -->
<!--search用于查询文本--> <!--list时预定义选项一般绑定datalist中id-->
<input type="search" name="" list="skill" placeholder="请输入搜索的内容">
<datalist id="skill">
<option value="javaSE"></option>
<option value="css"></option>
<option value="javaWeb"></option>
</datalist>
</body>
</html>
2556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
