Katika somo hili utakwenda kujifunza jinsi ya kutengeneza ukurasa wa kupost kwa kutumia html form
Sasa tutakwenda kutengeneza html form kwa ajili ya ku post. Uurasa huu utauwa na sehemu ya ku upload picha. Pa sehemu ya kuchaguwa tarehe.
Uurasa huu tutatuita post.php. l upata maeleezo zad juu ya kutengeneza kurasa hizi rudi kwenye mafunzo yatu ya PHP. Pa tutatuma Cedtor plugin kwa ajili ya kuweka uwanja wa kuandika.
1. wanza tutatengeneza faili la css kwa ajili ya kuboresha muonekano wa ukurasa wetu.
Code hizo hapo chini
* {
box-sizing: border-box;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=submit] {
background-color: #424ef5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
input[type=submit]:hover {
background-color: #45a049;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
2. Kisha tutatengeneza faili sasa la html form kwa ajili ya kuandika post
Copy code hizo hapo chini
<html>
<head>
<title>create your post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script src="ckeditor.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="post_script.php" method="post" enctype="multipart/form-data">
<label for="title">Title</label><br>
<input type="text" name="title" placeholder="write your post title" id="title"><br>
<label for="summary">Summary</label><br>
<input type="text" name="summary" placeholder="write your post summary" id="summary"><br>
<label for="content">content</label><br>
<textarea name="content" id="content" placeholder="wrte your post content"></textarea>
<script>CKEDITOR.replace( 'content' );
</script>
<label for="publisher">publisher</label><br>
<input type="text" name="publisher" placeholder="write your post publisher" id="publisher"><br>
<label for="date">Date</label><br>
<input type="date" name="date" placeholder="write your post date" id="date"><br><br>
<label for="image">upload your image</label>
<input type="file" name="file" accept="image/*" id="image"><br><br>
<input type="submit" name="submit" value="submit">
</form>
<br><br>
</body>
</html>
MUONEKANO WA UKURASA
Baada ya kumalza kila kitu ukurasa wetu utaonekana hivi
Mwisho:
katika somo linalofuata tutakwenda kujifunza kuandika code za php kwa ajili ya kutuma post.
Je! umeipenda hii post?
Ndio Hapana Save post
Imeandikwa na Rajabu Terehe 2023-10-20 Download PDF Share on facebook WhatsApp
