1.input表单元素中的type属性
<body>
<form>
<!--text 文本框 用户可以在里面输入任何文字-->>
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!--password 密码框 用户看不见输入的密码-->>
密码：<input type="password"> <br>
<!--radio 单选按钮 可以实现多选一-->>
<!--name是表单元素名字，这里性别单元按钮必须有相同的名字name，才可以实现单选一-->>
<!--单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮-->>
性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br>
<!--checkbox 复选框 可以实现多选-->>
爱好：吃饭 <input type="checkbox" name="hobby"> 听歌 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby">
<!--点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器-->>
<input type="submit" value="免费注册">
<!--重置按钮可以还原表单元素初始的默认状态-->>
<input type="reset">
<!--普通按钮button 后期结合js搭配使用-->>
<input type="button" value="获取短信验证码"><br>
<!--文件域 使用场景 上传文件使用的-->>
<input type="file">
</form>
</body>
</html>
2.label标签
label标签为input元素定义标注；
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将光标转到或者选择对应表单元素上，用来增加用户体验；
label标签的for属性应当与相关元素的id属性相同
<body>
<label for="text">用户名：</label><input type="text" value="请输入用户名" id="text">
性别：<label for="nan">男</label> <input type="radio" name="sex" id="nan"> <label for="nv">女</label> <input type="radio" name="sex" id="nv">
</body>
</html>
3.select下拉表单元素
在页面中，若有多个选项让用户选择，并想要节约页面空间，可使用select标签控件定义下拉列表；
select标签中至少包含一对option标签；
在option中定义selected="selected"时，当前项即为默认选中项
<body>
籍贯：
<select>
<option>山东</option>
<option>甘肃</option>
<option>陕西</option>
<option selected="selected">北京</option>
</select>
</body>
</html>
4.textarea文本域标签
当用户输入内容较多时，可以使用textarea标签，定义多行文本输入的控件
<body>
<form>
今日反馈：
<textarea rows="6" cols="50">在此输入反馈内容</textarea>
</form>
</body>
</html>
5.表单元素总结
- 表单元素有三大组：input输入表单元素、select下拉表单元素、textarea文本域表单元素；
- 这三组表单元素都应该包含在form表单域里，并且有name属性；
- 三个名字相似的标签：
表单域form：提交区域内表单元素给后台服务器；
文件域file：是input type属性值，用于上传文件；
文本域textarea：可以输入多行文字；
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
