文章目录
form标签和input标签嵌套示例:
1、form表单提交数据的几个注意事项:
(1)所有获取用户输入的标签都必须放在form表单中
(2)action控制着往哪个地方提交
(3)input/select/textarea都需要有name属性
(4)提交按钮<input type=“submit”>
写法:
<form action="" method="post" >
*********
</form>
2、input系列:
(1)text
(2)password
(3)redio 单选
(4)checkbox 多选
(5)date 日期
(6)file 文件
(7)sleect 下拉菜单
(8)option 具体的下拉选项
(9)optgroup 分组的下拉框
(10)textarea 大段文本
(11)submit 提交
(12)button 普通按钮,多用js给它绑定事件
(13)reset 重置
<optgroup label="上海">
</optgroup>
1、text :输入文本
<!--规范写法-->
<p>
<label for="user1">用户名:</label>
<input id="user1" name="username" type="text" value="强总" maxlength="10">
<!--for对应的是标签中的id值,知道和哪个标签相关联-->
<label>
<input name="username" type="text" placeholder="强总" maxlength="10">
</label>
</p>
<!--不规范写法-->
<p>
<input name="username" type="text" maxlength="10">
</p>
说明:
placeholder:在输入字段为空时显示,并会在字段获得焦点时消失
maxlength:最大输入内容
2、password 密码
<p>
<label for="">密码:
<input name="password" type="password" maxlength="10">
</label>
</p>
3、redio 单选
<p>性别:
<label for="s1">男</label>
<input id="s1" name="sex" type="radio">
<label for="s2">女</label>
<input id="s2" name="sex" type="radio">
<label>保密
<input id="s3" name="sex" type="radio" checked>
</label>
<!--加上label后,点击文字也能勾选上,否则必须选中框才能勾选-->
</p>
说明:
<!--checked:默认选中-->
4、checkbox 多选
<p>兴趣:
<label for="">篮球
<input name="habby" type="checkbox">
</label>
<label for="">足球
<input name="habby" type="checkbox">
</label>
<label for="">羽毛球
<input name="habby" type="checkbox">
</label>
<input name="habby" type="checkbox">台球
</p>
5、date 日期
<p>生日:
<input name="birthday" type="date">
</p>
<p>具体生日:
<input name="birthday" type="datetime-local">
</p>
6、file 文件
<p>头像:
<input name="file" type="file">
</p>
7、sleect 下拉菜单
option 具体的下拉选项
optgroup 分组的下拉框**
<select>
<option name="city" value="1" selected>上海</option>
<option name="city" value="2">北京</option>
<option name="city" value="3">深圳</option>
<option name="city" value="4">广州</option>
<!--selected:默认选中-->
</select>
<select>
<optgroup label="北京">
<option value="1">海淀</option>
<option value="2">朝阳</option>
<option value="3">昌平</option>
</optgroup>
<optgroup label="上海">
<option value="1">黄埔</option>
<option value="2">静安</option>
<option value="3" selected>浦东</option>
</optgroup>
</select>
8、textarea 大段文本
<p>
<textarea name="info" id="t1" cols="30" rows="10"></textarea>
<!--可以填写大量文本-->
</p>
9、submit 提交
<p>
<input name="submit" type="submit" value="提交">
</p>
所有代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input标签</title>
</head>
<body>
<form action="" method="post" >
<p>
<label for="user1">用户名:</label>
<input id="user1" name="username" type="text" value="强总" maxlength="10">
<!--for对应的是标签中的id值,知道和哪个标签相关联-->
<!--规范写法-->
<label>
<input name="username" type="text" placeholder="强总" maxlength="10">
</label>
<!--placeholder:在输入字段为空时显示,并会在字段获得焦点时消失-->
</p>
<p>
<label for="">密码:
<input name="password" type="password" maxlength="10">
</label>
</p>
<p>性别:
<label for="s1">男</label>
<input id="s1" name="sex" type="radio">
<label for="s2">女</label>
<input id="s2" name="sex" type="radio">
<label>保密
<input id="s3" name="sex" type="radio" checked>
<!--checked:默认选中-->
</label>
<!--加上label后,点击文字也能勾选上,否则必须选中框才能勾选-->
</p>
<p>爱好:
<label for="">篮球
<input name="habby" type="checkbox">
</label>
<label for="">足球
<input name="habby" type="checkbox">
</label>
<label for="">羽毛球
<input name="habby" type="checkbox">
</label>
<input name="habby" type="checkbox">台球
</p>
<p>生日:
<input name="birthday" type="date">
</p>
<p>具体生日:
<input name="birthday" type="datetime-local">
</p>
<p>头像:
<input name="file" type="file">
</p>
<select>
<option name="city" value="1" selected>上海</option>
<option name="city" value="2">北京</option>
<option name="city" value="3">深圳</option>
<option name="city" value="4">广州</option>
<!--selected:默认选中-->
</select>
<select>
<optgroup label="北京">
<option value="1">海淀</option>
<option value="2">朝阳</option>
<option value="3">昌平</option>
</optgroup>
<optgroup label="上海">
<option value="1">黄埔</option>
<option value="2">静安</option>
<option value="3" selected>浦东</option>
</optgroup>
</select>
<p>
<textarea name="info" id="t1" cols="30" rows="10"></textarea>
<!--可以填写大量文本-->
</p>
<p>
<input name="submit" type="submit" value="提交">
</p>
</form>
</body>
</html>