HTML表单元素合集

1>几个调出和验证：

<body>   
    <input type="email" name="e">    <!--对邮箱进行验证-->
    <input type="url" name="u">      <!--是否为有效网址-->
    <input type="tel" name="t">      <!--是否为有效手机号-->
    <input type="number" name="n">   <!--是否为数字-->
    <input type="range" name="r">    <!--进度条-->
    <input type="color" name="c">    <!--调出选色板-->
    <input type="date" name="d">     <!--调出日期-->
    <input type="file" name="f" multiple="x">    <!--选取文件 multiple="x"：多选-->
</body>

2>定义选项列表：

<body>
<input type="text" name="text1" list="taglist">
    <form autocomplete="on">                               <!--autocomplete="on"：自动索定-->
    	<datalist id="taglist">
    		<option>你好!nice to meet you!</option>
    		<option>你好!nice to meet you!</option>
    		<option>你好!nice to meet you!</option>
    		<option>你好!nice to meet you!</option>
    	</datalist>
    </form>
</body>

效果：

（双击表单）

3>选择列表：select>option

<body>
<select class="sel-1">                    <!--当有属性multiple="multiple"时为多选菜单-->
		<option>北京</option>
		<option>上海</option>
		<option>广州</option>
		<option>深圳</option>
	</select>
</body>

效果：

<body>
<textarea name="ttext"></textarea>    <!--文本框-->
</body>

4>按钮：

<body>	
        <input type="reset" name="reset1">      <!--重置按钮-->
	<input type="submit" name="submit1">    <!--提交按钮-->
	<input type="button" name="button1" value="刷新">    <!--一般按钮-->
</body>

5>隐藏标签（文档细节标签）：

<body>   
 <details>
    	<summary>你好！</summary>    <!--summary：显示部分，其余隐藏-->
    	<p>Nice to meet you!</p>
    	<p>Nice to meet you!</p>
    	<p>Nice to meet you!</p>
    </details>
</body>

效果：(默认是独占一行的)

点击三角：

6>checkbox 框型选项（一般为复选）：

<body>	
    <form>
        <label><input type="checkbox" name="chek1">Yes</label>   <!--使用label标签时，点击文字就可选中-->
	<label><input type="checkbox" name="chek2">No</label>
   </form>
 </body>

7>radio 圆形选项（一般为单选）:

<form>
	<label><input type="radio" name="1" value="1">男</label>      <!--name值相同时，为单选；不相同时为多选-->
	<label><input type="radio" name="1" value="2">女</label>
</form>

8>文本表单：

     <input type="text" name="x" placeholder="请输入地名">  <!--输入前有文字提示-->
     <input type="text" name="y" required="required">      <!--验证输入不能为零-->
     <input type="text" name="z" autofocus="on">           <!--自动获取交点-->

三个属性效果分别为：

9><p></p> 标签：

<body> 
111111<p hidden="hidden">beibujefufewolwdfnewf</p>fgwfbifvj      <!--隐藏文本内容（数字和字母之间的部分隐藏了）-->
     <p contenteditable="true">efuipgfffehq2h</p>                <!--可编辑文段-->
</body>

效果：（第二个）

9>提交查询：（pattern="..."）

	<form>
		<input type="text" name="1" pattern="x" title="nihao">     <!--tltle:文本提示（挡鼠表移到输入框时会有提示文字）-->
		<input type="submit" name="2">
	</form>

效果：

10>其他：

<progress></progress> ---------> 进度条标签属性：value="(number)"(进度值)；max="(number)"（进度最大值）

<address></address> ---------> 存放地址信息标签

<menu><li></li></menu> ------> 菜单标签

...

11>示例：

效果：

猜你喜欢