前端-part2-form表单+下拉框
原创
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>form表单示例</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
<!--网址 方法 定义二进制传输 表单数据是否按照输入历史自动补全 开启格式检查 -->
<p>
<label for="i1">用户名:</label>
<!--label（标签的意思）这里相当于是一种规范，下面的input有id值预期对应-->
<input id="i1" name="name" type="text" value="小强">
<!--name相当于字典的键，value相当于值，这里默认把value写死了-->
<input name="name" type="text" placeholder="小强" disabled>
<!--placeholder代表设的是空的显示值，不妨碍设定自己的值，disable就是把这个输入框置灰，失效-->
</p>
<p>密 码:
<input name="user_pwd" type="password">
<!--声明是password类型的type，声明密文在页面显示-->
</p>
<p>邮 箱:
<input name="user_email" type="email">
</p>
<p>
性 别:
<label for="ri">男</label>
<input id="ri" name="gender" type="radio" value="1">
<label for="r2">女</label>
<input id="r2" name="gender" type="radio" value="0">
<!--gender是性别的意思，radio代表用的是单选-->
</p>
<p>
爱 好:
<label for="h1">篮球</label>
<input id="h1" name="hobby" type="checkbox" value="basketball">
<label for="h2">足球</label>
<input id="h2" name="hobby" type="checkbox" value="football">
<label for="h3">双色球</label>
<input id="h3" checked name="hobby" type="checkbox" value="double_color_ball">
<!--checked代表默认选上，checkbox代表可以多选-->
</p>
<p>
生 日:
<input name="birthday" type="date">
</p>
<!--以下是下拉框--><!--以下是下拉框--><!--以下是下拉框-->
<!--以下是下拉框--><!--以下是下拉框--><!--以下是下拉框-->
<select name="form_1" id="s1" multiple><!--加个multiple代表可多选-->
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sc">四川</option>
</select>
<select name="form_2" id="s2">
<optgorup label="北京">
<option value="cp">昌平</option>
<option value="cy">朝阳</option>
<option value="hd">海淀</option>
<option value="ft">丰台</option>
</optgorup>
<optgroup label="上海"><!--optgroup代表大字选项-->
<option value="pdxq">浦东新区</option><!--option里面的代表小的选项-->
<option value="mhq">闵行区</option>
<option value="hpq">黄浦区</option>
</optgroup>
<optgroup label="四川">
<option value="pzh">攀枝花</option>
<option value="zg">自贡</option>
<option value="my">绵阳</option>
</optgroup>
<!---->
</select>
<p>
<textarea name="info" id="t1" cols="30" rows="10"></textarea>
<!--大型输入框，可以输入很多的东西-->
</p>
<p>
<input name="picture" type="file">
<!--这里主要是针对上传文件，传的是一张图片 -->
</p>
<p><input type="submit" value="提交吧"></p>
<p><input type="button" value="这是个没什么用的按钮"></p>
<!--submit提交本次表单，而button需要被赋值-->
</form>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读