表单图示 |
---|
表单的作用就是用来收集用户输入的信息
表单的组成:表单域,表单元素
表单域标签:<form></form>
,放置所有的表单元素
可输入明文内容的输入框----用户名
<input type="text" maxlength="6">
图示 |
---|
多学一招:maxlength属性可以限制最大输入长度,为了让服务器端接收到输入的数据,表单元素都需要加name属性
输入密文的输入框----密码
<input type="password">
图示 |
---|
密码框的属性和使用和文本框一样
只能选择一项的表单----性别选择
<input type="radio" value="0">
图示 |
---|
注意:要想单选框的单选功能生效,必须添加name属性,并且name属性的值必须一样,这种无法输入的表单元素必须赋值:value=“值”,默认选中项使用checked="checked"属性
代码
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1" checked>女
示意图 |
---|
可以选择多项的表单----爱好选择
<input type="checkbox" value="0">
使用方式和属性与单选框一样
示例代码
<input type="checkbox" />足球
<input type="checkbox" />排球
<input type="checkbox" checked />篮球
效果图 |
---|
<input type="file">
图示 |
---|
通常用于选择籍贯或收货地址中的省市区
<select>
<option>江苏</option>
<option>浙江</option>
<option>安徽</option>
</select>
默认选中项使用selected=“selected”
图示 |
---|
多学一招:下拉菜单可以分组展示
代码
<select>
<optgroup label="省份">
<option value="1">山东省</option>
<option value="2">河北省</option>
<option value="3" selected>河南省</option>
</optgroup>
<optgroup label="行业">
<option value="1">IT互联网</option>
<option value="2">制造业</option>
<option value="3" selected>零售业</option>
</optgroup>
<optgroup label="薪资范围">
<option value="1">1000~3000元/月</option>
<option value="2">3000~5000元/月</option>
<option value="3" selected>5000~8000月</option>
</optgroup>
</select>
图示 |
---|
可以输入很多的内容----qq的留言输入框
<textarea></textarea>
代码
<textarea></textarea>
效果 |
---|
多学一招:文本域可以通过两个属性来设置大小,宽度使用cols属性,高度使用rows属性
示意图 |
---|
点击不会有任何效果
<input type="button" value="普通按钮">
示意图 |
---|
用于提交表单的按钮
<input type="submit">
示意图 |
---|
多学一招:该按钮点击后默认会将表单的数据提交
将表单的输入状态还原的按钮
<input type="reset">
示意图 |
---|
多学一招:该按钮点击后会将表单的输入状态还原到最初
标签:<form></form>
作用:将表单元素的值收集起来,发送给服务器,form标签的action属性的值就是数据提交的地址
第一次提交,没有数据,因为很多表单元素都没有name属性,服务器接收数据靠的就是表单的name属性
注意:form是一个双标签,里面包含所有需要一次性提交给服务器的表单元素
代码
<form>
用户名:<input type="text" name="username" />
密码:<input type="password" name="password" />
<input type="submit" />
</form>