前端基础-HTML表单---cwl_java

表单

表单图示

表单的作用就是用来收集用户输入的信息

表单的组成：表单域，表单元素

表单域标签：<form></form>，放置所有的表单元素

表单元素：1.文本框

可输入明文内容的输入框----用户名

<input type="text" maxlength="6">

图示

多学一招：maxlength属性可以限制最大输入长度，为了让服务器端接收到输入的数据，表单元素都需要加name属性

2.密码框

输入密文的输入框----密码

<input type="password">

图示

密码框的属性和使用和文本框一样

3.单选框

只能选择一项的表单----性别选择

<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>女

示意图

4.复选框

可以选择多项的表单----爱好选择

<input type="checkbox" value="0">

使用方式和属性与单选框一样

示例代码

<input type="checkbox" />足球 <input type="checkbox" />排球 <input type="checkbox" checked />篮球

效果图

5.文件上传

<input type="file">

图示

6.下拉菜单

通常用于选择籍贯或收货地址中的省市区

<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>

图示

7.文本域

可以输入很多的内容----qq的留言输入框

<textarea></textarea>

代码

<textarea></textarea>

效果

多学一招：文本域可以通过两个属性来设置大小，宽度使用cols属性，高度使用rows属性

示意图

8.普通按钮

点击不会有任何效果

<input type="button" value="普通按钮">

示意图

9.提交按钮

用于提交表单的按钮

<input type="submit">

示意图

多学一招：该按钮点击后默认会将表单的数据提交

10.重置按钮

将表单的输入状态还原的按钮

<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> ---来自腾讯云社区的---cwl_java