html通过表单收集用户信息(即:不同类型数据)并提交后台服务器。
所有向服务器提交信息的标签以及值都必须放在<form>
标签中
input标签
input标签用于收集用户信息.根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。常用标签有:
- <input type="text"> 文本域.用户可以在文本域写入文本如用户名等,注意这里是单行输入。
<input type="text" name="username">
- <input type="password">密码域.密码字段字符不会明文显示,而是以圆点替代。
<input type="password" name="password">
- <input type="checkbox">复选框,可以多项选择。
<input type="checkbox" name="swimming">游泳
<input type="checkbox" name="study">读书
<input type="checkbox" name="climbing">爬山 - <input type="radio">单选框,注意此时同一组内容 name属性值必须一致
<input type="radio" name="sex" value="male" />
<input type="radio" name="sex" value="female" />
button类型
- submit<input type="submit">提交按钮,会传送内容至后台
<input type="submit" value="submit"> - button<input type="button">按钮,数据不会传输至后台,需配合后期js使用
<input type="button" value="button"> - reset<input type="reset">当用户单击重置按钮时,input输入框内用户输入的内容都会被重置为默认值。
<input type="reset" value="reset">
其他重用标签
<label> 标签。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label for="male">用户名</label>
<input type="text" id="male" name="username">select标签和option标签。这两个标签配套使用,用于下拉选项。
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>textarea标签。用于文本域,可输入多行大段文字,多用于评论,介绍等
<textarea rows="10" cols="30">
</textarea>placeholder标签。在文本输入框中显示灰色提示文字,开始输入内容,提示文字会消失。
<input type="text" name="username" placeholder="请输入用户名">