HTML 表单的用法
2017-02-15 本文已影响0人
yytyff
定义与方法：
- <form> 标签用于为用户输入创建 HTML 表单。
- 表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。
- 表单还可以包含menus,textare，fieldset,legend和label元素
- 表单用以向服务器传输数据。
input
建立一个文本框：
<html>
<body>
<form>
名：<input type="text" name="firstname">
<br>
姓：<input type="text" name="lastname">
</form>
</body>
</html>
button
提交按钮
<button>提交</button>
action method
action
访问的地址
method:提交表单的方法 ，有get和post两种
<form action="abc" method="get">
password placeholder
password输入内容自动变成圆点,安全性更高 placeholder提示“输入密码”
<div class="password">
<label for="password" >密码</label>
<input id="password" type="password" name="password" placeholder="输入密码">
</div>
file
文件上传
<div class="file">
<input type="file" name="myfile" accept="image/png, image/jpeg"/>
</div>
select
下拉菜单
<div class="select">
<select name="city" id="">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
CheckBox
多选
<div class="hobby">
<label >爱好</label>
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
radio
单选
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
textarea
多行文本
<div class="textarea">
<textarea name="article" id="" cols="30" rows="10">
ddddd
</textarea>
</div>
reset
清空信息
<input type="reset" value="Reset">
