<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form-128</title>
</head>
<body>
<!-- <form action="#" method="post"> -->
<form action="03-new.html" method="post">
<div>
<lable>username</lable>
<div>
<!-- tidy风格 一对一对的写成格式
placeholder:在没有value值提示的时候,默认在文本框中输入提示的内容
required: 必须满足规则
checked:单选/复选框 默认勾选某项
checkbox:多选 name='read',value=yes
-->
<input type="text" name="username" minlength="1" maxlength="16" placeholder="用户名" required="">
</div>
<lable>password</lable>
<div>
<input type="password" name="password" minlength="1" maxlength="16" placeholder="密码" required="">
</div>
<div>
<lab>email</lab>
<div>
<input type="email" name="email" placeholder="可选">
</div>
</div>
<div>
<label>ganeder</label>
<div>
<input type="radio" name="ganeder" value="femal">女士
<input type="radio" name="ganeder" value="male">男士
<input type="radio" name="ganeder" value="secury" checked="">保密
</div>
<div>
<lab>hobby</lab>
<div>
<input type="checkbox" name='read' value=yes checked>读书
<input type="checkbox" name='play' value=yes>运动
<input type="checkbox" name='movie' value=yes>影视
<input type="checkbox" name='movie' value=yes checked>其他
</div>
</div>
<div>
<label>age:</label>
<!-- type:为number,数字会出现上下拉,添加减少数字。 可以设置最大值,最小值 -->
<input type="number" name="age" value="18" min="1" max="130">
</div>
<div>
<label>salary</label>
<div>
<!-- range:必须配合样式表,才是最有用的 -->
<input type="range" name="coin" value="" min="1" max="100" step=10>
</div>
</div>
<div>
<label>date</label>
<!-- date: 下拉选择的话,对于2月份会选择29天,不对自动判断闰年,月份的天数 -->
<div>
<input type="date" name="date">
<input type="month" name="month">
<input type="datetime-local" name="datetime">
</div>
</div>
<div>
<lable>submit</lable>
<div>
<!-- submit没有value值得时候,
h3,h4之前用的标签 submit浏览器中默认会设置为提交显示 各个浏览器的默认提示不同,http浏览器需要输入http或者https
-->
<input type="submit" name="submit" value="submit-login">
<input type="reset" name="reset" value="reset">
</div>
<p>
<!-- <input type="button" name="button" οnclick="login()" value="button-sign in"> -->
</p>
<div>
<!-- button本身默认功能就是发送 h5新的常用的标签 -->
<button>button-sign </button>
</div>
</div>
<h3>表单验证</h3>
</form>
</body>
</html>
HTML-form表单示例
最新推荐文章于 2024-07-19 21:11:59 发布