003-html表单

1.表单域:<form></form>

2.表单元素

input标签:

type="text"文本框

type="password"密码框

type="file"上传文件

type="radio"单选框

 <input type="radio" name = "sex" value="0"><input type="radio" name = "sex" value="1" checked>女
# 要想单选框的单选功能生效,必须添加name属性,并且name属性的值必须一样,这种无法输入的表单元素必须赋值:value="值",默认选中项使用checked="checked"属性

type="checkbox"复选框

# <input type="checkbox" value="0"checked="checked" >(checked="checked"表示默认选择)

<input type="checkbox" checked="checked"><input type="checkbox" ><input type="checkbox" checked="checked"><input type="checkbox">

type="button"普通按钮

type="submit"提交按钮

type="reset"重置按钮

input新增type属性值(html5):

type="email",文本框中只能输入email地址

type="date",日期控件

type="time"

type="month"

type="week"

type="number",唤醒数字键盘

type="range",滑块

 type="color"

下拉框

# 默认选中项使用selected="selected"
<select>
    <option>江苏</option>
    <option>浙江</option>
    <option>安徽</option>
</select>

# 拉菜单可以分组展示
<select>
        <optgroup label="省份">
            <option value="1">山东省</option>
            <option value="2">河北省</option>
            <option value="3" selected>河南省</option>
        </optgroup>
        <optgroup label="行业">
            <option value="1">IT互联网</option>
            <option value="2">制造业</option>
            <option value="3" selected>零售业</option>
        </optgroup>
        <optgroup label="薪资范围">
            <option value="1">1000~3000元/月</option>
            <option value="2">3000~5000元/月</option>
            <option value="3" selected>5000~8000元/月</option>
        </optgroup>
</select>

文本域:<textarea></textarea>

<textarea rows="5" cols="20">hello,world!</textarea>

3.表单属性(html5新增)

required:必填

placeholder:输入内容提示

autofocus:自动获取焦点-----自动帮我们将光标点进去

 

原文地址:https://www.cnblogs.com/kite123/p/14573199.html