有关HTML5表单

最新推荐文章于 2022-12-07 20:24:39 发布

coding sheep

最新推荐文章于 2022-12-07 20:24:39 发布

阅读量135

点赞数

分类专栏： HTML5/CSS3/JavaScript

本文链接：https://blog.csdn.net/wanyun_qian/article/details/103947177

版权

HTML5/CSS3/JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.textarea

<textarea id="msg" cols="50" rows="8" placeholder="请填写详实的反馈意见"></textarea>

效果：
在这里插入图片描述
textarea用于多行字符输入显示使用，主要属性有rows、cols等。
2.单选按钮

代码：

<label>
<input type="radio" name="grade" value="1" checked="checked">普通会员
</label>
<label>
<input type="radio" name="grade" value="2" checked="checked">VIP会员
</label>
<label>
<input type="radio" name="grade" value="3" checked="checked">管理员
</label>

使用<input type="radio">即可。
3.复选框
在这里插入图片描述
代码：

<label><input name="web" type="checkbox" value="html" /> HTML5</label>
<label><input name="web" type="checkbox" value="css" />CSS3</label>
<label><input name="web" type="checkbox" value="js" /> JavaScript</label>

使用<input type="checkbox">即可。
3.选择框

<form>
    <p>姓名：<input type="text" value="" /></p>
    <p>所在城市：
        <select name="city">
            <optgroup label="山东省">
                <option value="潍坊">潍坊</option>
                <option value="青岛">青岛</option>
            </optgroup>
            <optgroup label="山西省">
                <option value="太原" selected="selected">太原</option>
                <option value="榆次">榆次</option>
            </optgroup>
        </select></p>
    <p><input type="submit" value="提交"/></p>
</form>

效果如下图：
在这里插入图片描述
4.文件域和隐藏域

<form action="/file/upload" method="post" enctype="multipart/form-data">
	<h2>上传文件（2级文件）</h2>
	<!-- 文件域 -->
	<!-- 加上了multiple就可以同时上传多个文件 -->
    <input type="file"  name="file" multiple/>
	<!-- 隐藏域 -->
    <input type="hidden" name="star" value="2">
    <button type="submit">上传</button>
</form>

效果如下：
在这里插入图片描述
5.按钮

<form method="get" action="#">
    <input type="text" name="uname" value="张三" /></br></br>
    <input type="password" name="pwd" value="123" /></br></br>
    <input type="image" src="images/button.png" name="image_btn" value="注册1" /> 
    <input type="submit" name="input_btn" value="注册2" /> 
    <button type="submit" name="button_btn" value="注册3"><img src="images/button.png" ></button>
</form>

上面代码展示了不同的按钮表示方法。
6.数据列表

<form action="testform.asp" method="get">
    请输入网址：<input type="url" list="url_list" name="weblink" />
    <datalist id="url_list">
        <option label="新浪" value="http://www.sina.com.cn" />
        <option label="搜狐" value="http://www.sohu.com" />
        <option label="网易" value="http://www.163.com" />
    </datalist>
    <input type="submit" value="提交" />
</form>

使用input中的list属性，并且datalist中的id需要list属性来引用，效果如下：
在这里插入图片描述
7.输出结果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
 function multi(){
    a=parseInt(prompt("请输入第1个数字。",0));
    b=parseInt(prompt("请输入第2个数字。",0));
    document.forms["form"]["result"].value=a*b;
 }
</script>
</head>

<body onload="multi()">
<form action="testform.asp" method="get" name="form">
    两数的乘积为: <output name="result"></output>
</form>
</body>

</html>

使用output元素输出即可，这里加入了javascript函数。
8.必填
代码：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="/testform.asp" method="get">
    请输入姓名:
    <input type="text" name="usr_name" required="required" />
    <input type="submit" value="提交" />
</form>
</body>
</html>

使用input标签的required属性定义即可。
在这里插入图片描述
9.自动完成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>输入你最喜欢的城市名称</h2>
<form autocompelete="on">
    <input type="text" id="city" list="cityList">
    <datalist id="cityList" style="display:none;">
        <option value="BeiJing">BeiJing</option>
        <option value="QingDao">QingDao</option>
        <option value="QingZhou">QingZhou</option>
        <option value="QingHai">QingHai</option>
    </datalist>
</form>
</body>
</html>

使用autocomplete属性就可以，有较大的安全隐患，效果如下：
在这里插入图片描述

10.自动获取焦点

使用autofocus，代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
    <p>请仔细阅读许可协议：</p>
    <p>
        <label for="textarea1"></label>
        <textarea name="textarea1" id="textarea1" cols="45" rows="5">许可协议具体内容......</textarea>
    </p>
    <p>
        <input id="ok" type="submit" value="同意" autofocus>
        <input type="submit" value="拒绝" >
    </p>
</form>
<script>
if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("ok").focus();
}
</script>
</body>
</html>