一、表单
##1.表单的作用
HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。
二、简单使用
首先需要form包裹整个需要提交的input数据
<form action="/login.html" method="post">
<div class="usernmae">
<label for="usernmae">用户名:</label>
<input id="username" type="text" name="username">
</div>
<div class="password">
<label for="password">密码:</label>
<input type="text" id="password" name="password">
</div>
<div class="submit">
<button type="button">提交</button>
<input type="reset" value="重置">
</div>
</form>
需要注意的是 一定要在form的包括当中 如果不是就无法提交数据到后台。
login.html
action
是属于往哪个地方提交数据
method
提交时用于什么方法 默认不填就是get
name
属于整个提交当中的唯一标识
<label for="usernmae">用户名:</label>
在左边提示for中的变量名一定是和input中的id是一致的,还有一个就是点击用户名就会自动跳转到input框当中
<button type="button">
是提交整个form中的input数据
<input type="reset" value="重置">
重置功能,属于批量清空删除input框中的数据,回到原始状态
当选和复选框
譬如<input type="checkbox" name="hobby" value="read">读书
checkbox
就是复选框 可选多个
value
是当前input框中的值
<input type="radio" name="hobby" value="read">
radio是当选框 如果是多个只能选择一个。
文件
<input type="file" name="myfiel" accept="image/png">
type=file是文件类型的
accept
限制是什么后缀名
下拉选择框
譬如
<select class= name="city">
<option value="beijing">北京</option>
<option value="guangzhou" selected="">广州</option>
<option value="hangzhou">杭州</option>
</select>
下拉选择框不同input框 name只需一个包裹在select标签中,selected是默认选中项
文本框
<textarea name="article" id="" cols="30" rows="10"></textarea>
cols
列
rows
行