html之表单

表单作用:搜集信息;
组成:提示信息、表单控件、表单线

<form action="1.php" method="post" maxlength="6(最大长度)" readonly="readonly(只读,不能编辑)" disabled="disabled(输入框未激活:不能编辑)" value="大前端(将输入框内容传给处理文件)">
用户名:<input type="text" name="userName">
密码:<input type="password" name="psd">
提交:<input type="submit">

性别:<input type="radio(单选框)" name="gender" checked="checked(设置默认选中项)">男
只有将name的值设置相同时,才能实现单选效果

表单之下拉列表

所在地:省(市)<select name="" id="">
                <optgroup label="北京市">对下拉列表分组
                    <option>下拉列表选项</option>
                    <option>山西</option>
                    <option selected="selected">北京(默认选中项)</option>
                    <option multiple="multiple">多选</option>
                </optgroup>
</select>

给表单进行分组

<form action="">
    <fieldset>
        <legend>分组信息,名称</legend>
    </fieldset>
</form>

多选框

<input type="checkbox" checked="checked">同时开通qq空间
<input type="checkbox">我已阅读并同意相关服务条款和隐私政策

多行文本框

简介<textarea cols="30" rows="10"></textarea>
cols:一行字符长度
rows:行数

文件上传控件

上传身份证:<input type="file">
提交:<input type="submit">
图片按钮:<input type="image" src="1.jpg">

表单重置按钮

<input type="reset">

网址控件

<input type="url">

日期控件

<input type="date">

时间控件

<input type="time">

邮件控件

<input type="emil">

数字控件

<input type="number" step="5">

滑块控件

<input type="range" step="50">

标签语义化

好的语义化网站标准:去掉样式表文件之后,结构依然很清晰。

posted @ 2018-04-09 14:32  叶子玉  阅读(138)  评论(0编辑  收藏  举报