浙江龙网

  1. 首页 > 生活百科 > >

day02-HTML02( 二 )

生活百科day02-HTML02


  • <input type="password"> 定义密码字段
  • <input type="text"> 定义用于文本输入的单行输入字段
  • 【day02-HTML02】<input type="submit"> 定义提交表单数据至表单处理程序的按钮 。
  • <input type="radio"> 定义单选按钮 ， 多个选择中只能选择一个选项
  • <input type="checkbox"> 定义复选框，复选框允许用户在有限数量的选项中选择零个或多个选项
  • <input type="number"> 用于应该包含数字值的输入字段
  • <input type="button"> 定义按钮
  • <input type="file" > 是文件上传域
    day02-HTML02

    文章插图

day02-HTML02

文章插图
4.3.12select/option/textarea标签
  • <select> 元素定义下拉列表
  • <option> 元素定义待选择的选项，列表通常会把首个选项显示为被选选项 。通过添加 selected 属性来定义预定义选项
  • <textarea>元素定义多行输入字段（文本域）

day02-HTML02

文章插图
4.3.13表单综合练习form 标签就是表单input type=text 是文件输入框value 设置默认显示内容input type=password 是密码输入框 value 设置默认显示内容input type=radio 是单选框 name 属性可以对其进行分组checked="checked"表示默认选中input type=checkbox 是复选框 checked="checked"表示默认选中input type=reset 是重置按钮 value 属性修改按钮上的文本input type=submit 是提交按钮 value 属性修改按钮上的文本input type=button 是按钮 value 属性修改按钮上的文本input type=file 是文件上传域input type=hidden 是隐藏域 ， 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）select 标签是下拉列表框option 标签是下拉列表框中的选项selected="selected"设置默认选中textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）rows 属性设置可以显示几行的高度cols 属性设置每行可以显示几个字符宽度
1.一定要使用form标签将input标签包起来，且一定要给input元素设置name属性，否则数据提交不到服务器
2.checkbox 是复选框 ， 如果希望是同一组 ， 就要保证 name 属性一致
  1. checkbox ,select, radio 提交数据的时候是 value 属性的值

day02-HTML02

文章插图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form>用户注册信息<br/>用户名称：<input type="text" name="username"><br/>用户密码：<input type="password" name="pwd1"><br/>确认密码：<input type="password" name="pwd2"><br/>请选择你喜欢的运动项目:<input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/lq">篮球<br/><input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/zq" checked>足球<br/><input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/sq" checked>手球<br/>请选中你的性别:<input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/male" checked>男<br/><input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/female">女<br/>请选中你喜欢的城市<select name="city"><option>--选择--</option><option value="https://www.huyubaike.com/biancheng/sh">上海</option><option value="https://www.huyubaike.com/biancheng/bj">北京</option><option value="https://www.huyubaike.com/biancheng/gz">广州</option></select><br/>自我介绍<textarea name="comment" rows="4" cols="25"></textarea><br/>请选中你的头像文件<input type="file" name="myfile"><br/><input type="submit" name="提交" value="https://www.huyubaike.com/biancheng/提交"><input type="reset" name="重置" value="https://www.huyubaike.com/biancheng/重置"></form></body></html>
day02-HTML02

文章插图
4.3.14表单格式化完成如下界面：
day02-HTML02

文章插图
练习：使用表格标签将表单格式化
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单格式化</title></head><body><form><h1>用户注册信息</h1><table><tr><td>用户名称：</td><td><input type="text" name="username"></td></tr><tr><td>用户密码：</td><td><input type="password" name="pwd1"></td></tr><tr><td>确认密码：</td><td><input type="password" name="pwd2"></td></tr><tr><td>请选择你喜欢的运动项目：</td><td><input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/lq">篮球<input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/zq" checked>足球<input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/sq" checked>手球</td></tr><tr><td>请选中你的性别：</td><td><input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/male" checked>男<input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/female">女</td></tr><tr><td>请选中你喜欢的城市：</td><td><select name="city"><option>--选择--</option><option value="https://www.huyubaike.com/biancheng/sh">上海</option><option value="https://www.huyubaike.com/biancheng/bj">北京</option><option value="https://www.huyubaike.com/biancheng/gz">广州</option></select></td></tr><tr><td>自我介绍：</td><td><textarea name="comment" rows="4" cols="25"></textarea></td></tr><tr><td>请选择你的头像文件：</td><td><input type="file" name="myfile"></td></tr><tr><td><input type="submit" name="提交" value="https://www.huyubaike.com/biancheng/提交"></td><td><input type="reset" name="重置" value="https://www.huyubaike.com/biancheng/重置"></td></tr></table></form></body></html>

推荐阅读


上一篇：Git新技能-stash操作

下一篇：Div. 3 Codeforces Round #826 A-E