<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表单元素</title>
</head>
<body>
<form action="https://blog.csdn.net/progammer10086" method="post" name="form1">
<!-- 表单元素：表示向何处发送表单数据,规定如何发送表单数据(get(会在网页上显示用户提交的信息),post更安全更常用)-->
<p>账号：<input type="text" name="username" size="30" value="张三" readonly></p><!-- readonly只读 -->
<p><label for="pass">密码：</label><input type="password" name="password" id="pass"></p>
<!-- label标签配合for和id用来增强鼠标的可用性,点击密码的字也可以转移光标-->
<p>邮箱：<input type="email" name="email" placeholder="请输入邮箱"></p>
<p>网址：<input type="url" name="网址" required pattern="[a-z]"></p>
<!-- required表单元素不能给空,pattern输入得内容必须符合给定得正则表达式 -->
<p>搜索框：<input type="search" name=""></p>
<p>数字：<input type="number" name="数字" max="10" min="1" step="2"></p>
<p>滑块：<input type="range" name="滑块" max="10" min="1" step="2"></p>
<!-- 最大值,最小值,合法的数字间隔 -->
<p>隐藏域：<input type="hidden" name="hidden" value="123"></p><!-- hidden给后台提交数据 -->
<p>
<input type="submit" value="提交按钮" name="submit" disabled><!-- 禁用 -->
<input type="reset" value="重置按钮" name="reset">
<input type="image" name="图片按钮" src="E:\\海绵宝宝1.JPG">
<input type="button" value="普通按钮" name="" >
<input type="file" value="上传文件按钮" name="">
</p>
</form>
<form action="" method="get">
<p>性别：
<label for="male">男</label><input type="radio" name="sex" value="男" id="male" checked><!-- 单选按钮 -->
女 <input type="radio" name="sex" value="女">
</p>
<p>水果：
苹果<input type="checkbox" name="checkbox" value="苹果"><!-- 复选框 -->
梨子<input type="checkbox" name="checkbox" value="梨子">
香蕉<input type="checkbox" name="checkbox" value="香蕉">
</p>
</form>
<select name="季节"><!-- 列表框 -->
<option value="春天">春天</option>
<option value="夏天">夏天</option>
<option value="秋天">秋天</option>
<option value="冬天">冬天</option>
</select>
<br>
<textarea name="多行文本域" cols="50" rows="25"></textarea><!-- 显示行数,显示列数 -->
<br>
</body>
</html>HTML学习笔记——表单元素
猜你喜欢
转载自blog.csdn.net/progammer10086/article/details/81253525
今日推荐
周排行