您的位置：首页 > Web前端 > HTML

关于HTML的表单标签

2015-10-10 10:58 344 查看

代码示例如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>表单标签</title>
</head>
<body>

<!--
表单标签：
<form>用于与服务器端的交互。
<input>：输入标签 ,接收用户输入,Type属性
text,password,radio,checkbox,hidden,
submit,reset,button,file，image
<select>标签 下拉列表  size  selected
<textare>标签 多行文本框
<lable>:for属性配合id一起用形成标注
form表单的两种提交方式的区别：
post和get
其中post的提交方式较为安全

-->
<!--
value的值是提交给服务器的
-->
<form action = "03-图片标签.html"  method = "post">
<fieldset>
<legend>必填信息</legend>
姓名：<input type = "text" value = "请输入您的名字" readonly disabled ></input><br>
密码：<input type = "password" value = "password"></input><br>
</fieldset>

<fieldset>
<legend>选填信息</legend>
隐藏框：<input type = "hidden" ></input><br>
单选：<input type = radio name = "sex" value = "male"></input>男<input type = radio  name = "sex" value = "female" checked></input>女<br>
多选：	<input type = "checkbox" name = "hobby" value = "running" >跑步</input>
<input type = "checkbox" name = "hobby" value = "play tennis" checked>打网球</input>
<input type = "checkbox" name = "hobby" value = "reading">阅读</input><br><br><br>

<input type = "button" name = "button" value = "普通按钮" onclick = "alert(this.name)"></input><br><br>
<input type = "reset" name = "reset" value = "重置按钮"></input><br><br>
<input type = "submit" name = "submit" value = "提交按钮"></input><br><br>
<input type = "image" src = "1.jpg" width = "30" height = "20"></input><br><br>

学历：<select name = "select" >
<option value = "high school">高中</option>
<option value = "middle school">初中</option>
<option value = "primary school">小学</option>
</select><br><br>

学历：<select name = "select" multiple >
<option value = "高中">高中</option>
<option value = "初中">初中</option>
<option value = "小学">小学</option>
</select><br><br>

备注：<textarea rows = "5" cols = "20">大神，请指点！</textarea><br>

</fieldset>
</form>

<button onclick = "alert('大家好！')">普通按钮</button><br>  <!--这和上面那个input中的button的效果是一样的-->

</body>
</html>

运行结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航