程序媛老张前端Day3———Html表单

Day3——Html表单

表单用于用户输入

表单的常用属性

• name：规定的名字
• action：提交表单，发送数据
• method：（post，get）如何发送表单的方式
  （悄声说，基础练习的时候可以暂时忽略）

表单常用元素

input：多用来输入

• type

type属性不同输入方式不同

text：文本单行输入
password：密码框
submit：提交按钮
image：图片提交
button:普通按钮
reset：重置按钮
file：文件框
checkbox：复选框
radio：单选按钮

radio是单选按钮，一组按钮需要有相同的name定义一下

性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>

• palceholder（填充字，可以区别一下value）

select（下拉列表）

用<option>定义带选项，下拉列表在后面js的学习中有二级联动等重要学习

textarea（定义多行文本输入）

button（按钮）

 <form>
            账号：<input type="text" placeholder="请输入账号"><br>
            邮箱：<input type="text" placeholder="请输入邮箱"><br>
            密码：<input type="password" placeholder="请输入密码"><br>
            性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
            技能：<input type="checkbox" name="able">HTML+CSS
            <input type="checkbox" name="able">JavaScript
            <input type="checkbox" name="able">Php
            <input type="checkbox" name="able">Java
        </div>
            <div >头像：<input type="file" value="选择文件"></div>
            <div>
                现居地：<select>
                <option>广东省</option>
                <option>贵阳省</option>
                <option>黑龙江省</option>
                <option>山东省</option>
                <option>辽宁省</option>
                <option>河北省</option>
            </select>
            </div>
            留言：<div>
        <textarea  class="tone" placeholder="请输入留言内容" >
        </textarea>
        </div>
            <div>
                验证码：<input type="text">&nbsp&nbsp
                <img src="1.jpg" width="70px" height="30px">
            </div>
            <div>
                <button type="submit">提交</button>
                <input type="button" value="重置">
            </div>
        </form>