<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>表单的一些说明</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style/form.css" rel="stylesheet" type="text/css" media="screen" />
<script src="main.js"></script>
</head>
<body>
<form action="/receive" method="POST">
<section>
<fieldset>
<legend>information</legend>
<label for="name">
Name: <abbr title="required">*</abbr>
</label>
<input type="text" name="username" value="请输入用户名" minlength="3" maxlength="15"><br>
<label for="email">
email:
</label>
<input type="email" name="email" placeholder="请输入电子邮件"><br>
<label for="pwd">
Password: <abbr title="required">*</abbr>
</label>
<input type="password" name="pwd"><br>
<input type="submit" value="confirm"><br>
</fieldset>
</section>
<!--
lable(标签)调用相应的小部件
其中input也可以确认呈递消息，但是一般用button
input 里可以使用autofocus，该框自动获取聚焦，disabled 不允许修改 value 元素初始值 placeholder为描述值 required 输入为必须
如果指定的type浏览器不支持，则默认text
multiple属性，它还可以让用户将多个电子邮件地址输入相同的输入(以逗号分隔)。
hidden 可以隐藏该表单
minlength，maxlength可以约束输入的长度，如果不满足则不会提交
或者使用pattern（里面包含正则表达式），进行约束
-->
<section>
<!-- radio及option -->
单选：
<input type="radio" name="choose" value="A" checked>A
<input type="radio" name="choose" value="B">B
<input type="radio" name="choose" value="C">C<br>
多选：
<input type="checkbox" name="chooses" value="A" checked>A
<input type="checkbox" name="chooses" value="B">B
<input type="checkbox" name="chooses" value="C">C<br>
<!-- 包含checked将在开始时被选中 当任何都没有被选中的时候，则不会被发送到服务器端 -->
下拉菜单：
<select name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select><br>
<!-- 可添加multiple元素 按住ctrl进行多选-->
<input type="number" name="age" id="age" min="1" max="10" step="2"><br>
<!-- 设置最大和最小，每次按照步长增减减少 -->
<input type="range" name="beans" id="beans" min="0" max="500" step="10"><br>
<!-- 滑动选择 -->
<input type="color" name="color" id="color">
<!--拾色器-->
<input type="file" name="file" id="file" accept="image/*" multiple>
<!--选择文件，accept限制了文件类型 multiple可选择多个文件-->
<input type="datetime-local" name="datetime" id="datetime" min="2017-06-01" max="2019-08-31"><br>
<!-- 时间选择，仅适用于google type还可为month,week,time-->
<input type="image" alt="Click me!" src="images/1.jpg" width="80" height="30" />
<!--如果使用图像按钮来提交表单，这个小部件不会提交它的值；
相反，在图像上单击的X和Y坐标是被提交的(坐标是相对于图像的
这意味着图像的左上角表示坐标0，0)，坐标被发送为两个键/值对：
X值键是name属性的值，后面是字符串“.x”。
Y值键是name属性的值，后面是字符串“.y”。
-->
<progress max="100" value="75">75/100</progress>
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
<!--进度条和仪表-->
自动补全输入框:
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">
<datalist id="fruitList">
<label for="suggestion">or pick a fruit</label>
<select id="suggestion" name="altFruit">
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option>
</select>
</datalist><br>
<!-- 支持<datalist>元素的浏览器将忽略所有不是<option>元素的元素，并按照预期工作。另一方面，不支持<datalist>元素的浏览器将显示标签和选择框。 -->
<textarea cols="20" rows="5" wrap="hard">
please write something here!
</textarea><br>
<!--框可拖拉-->
<button type="submit">confirm</button>
<!-- submit reset button-->
</section>
</form>
<!--来源：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets-->
</body>
</html>
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
