Web前端开发 课件 7.2.1 input元素

静态网页设计第七章交互接口——表单表单元素之input元素常用表单元素1Input元素

基本语法2Input元素的常用type取值3拓展提高4一、常用表单元素01剪辑：间隔板一、常用表单元素<inputtype=””name=””value=””……><textareaname=””>内容</textarea><selectname=””><optionvalue=””>选项</option><optionvalue=””>选项</option>……</select>inputselecttextare二、Input表单元素基本语法02剪辑：间隔板二、Input表单元素基本语法name：控件名称，服务器要接收信息的依据，名称不重复value：要传递的信息值。服务器要接收的内容type：元素类型，常用取值有语法格式：<inputtype=””name=””value=””……>数据传递动作发出text（表示文本输入框）password（表示密码输入框）radio（表示单选框）checkbox（表示多选框）file（表示文件上传框）hidden（隐藏框）button（普通按钮）reset（重置按钮）submit（提交按钮）Checked默认选中三、Input表单元素常用type取值03剪辑：间隔板text（文本框）password（密码框）radio（单选框）checkbox（多选框）file（文件上传框）hidden（隐藏框）三、Input表单元素常用type取值语法格式：<inputtype=””name=””value=””……>用户名：<inputtype=”text”name=”use”value=””>性别：<inputtype=”radio”name=”sex”value=”1”checked>男<inputtype=”radio”name=”sex”value=”0”>女用户名：可以输入汉字密码：··········性别：男女年龄段：30以下50以下70以下70以上为社会服务的领域：

学科教育美术辅导易容仪表✓✓✓

环境卫生心理辅导帮困扶危请上传头像：选择文件未选择文件数据传递三、Input表单元素常用type取值语法格式：<inputtype=””name=””value=””……>buttonresetsubmit<inputtype=”submit”value=”提交按钮”>动作发出四、拓展提高04剪辑：间隔板四、拓展提高1.图片按钮eg.<inputtype="image"src="images/register71.jpg">2.H5精准输入控件eg.<inputtype="date/week/month/color"name=""value="">3.双标记按钮总结与思考input元素除了前面讲的属性外，还有id、class、placehoder等通用属性，以及不同类型下的独有属性同学们不难发现HTML代码是有规律的，前面学的标记控件都有name属性，大多有value属性，但也有规律外的特例，如button无value属性生活亦然，虽无规矩不成方圆，但不拘泥规矩，据实而变，更是我们应勇敢追求的。如邓爷爷带领我们探索了深圳、厦门等经